我使用HTML、CSS和JS制作了一个汉堡菜单,它运行得非常好,但我想要最小化我的JS逻辑。
我在YouTube上做了一些研究,但每个人的逻辑几乎都相同。
看看我的JS逻辑,我能最小化我的JS逻辑吗?
如果您有更简短和简单的JS逻辑,请回答我。
HTML:
<div class="menu-btn">
<div class="hamburger"></div>
</div>
<div class="menu-list">
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
JS逻辑:
const hamburgerMenu = document.querySelector(".menu-btn");
const hamburger = document.querySelector(".hamburger");
const menuList = document.querySelector(".menu-list");
const homePage = document.getElementById("#home");
hamburgerMenu.onclick = () => {
hamburger.classList.toggle("active");
menuList.classList.toggle("active");
hamburgerMenu.classList.toggle("active");
};
menuList.onclick = function (e) {
if (e.target.classList !== "menu-btn") {
hamburger.classList.remove("active");
menuList.classList.remove("active");
hamburgerMenu.classList.remove("active");
}
};