javascript - 如何最小化汉堡菜单的 JavaScript？

Question

我使用 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");
  }
};

Answer 1

仅使用 HTML 和 CSS 就可以更容易地做到这一点。
这是展示概念的最低版本:

.menu-items {
  display: none;
}
.menu:hover>.menu-items {
  display: flex;
}

<div class="menu">
  <div class="hamburger">@</div>
  <nav class="menu-items">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#contact">Contact</a>
  </nav>
</div>

这是一个使用 transform: scale 进行过渡的样式示例和 opacity , 以表明您可以随心所欲。

.menu {
  width: max-content;
  height: 30px;
}

.hamburger {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transform: scale(.8);
  transform-origin: left;
}

.hamburger-line {
  height: 4px;
  width: 30px;
  margin-bottom: 3px;
  background: #59b;
  border-radius: 2px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  border: 1px solid #59b;
  border-radius: 3px;
  transform: scale(1, 0);
  transform-origin: top left;
  transition: .2s;
  opacity: 0;
}

.menu-items a {
  color: #222;
  font-size: 14px;
  font-family: sans-serif;
  padding: 10px;
  transition: .5s;
  text-decoration: none;
}

.menu-items a:hover {
  background: rgba(60, 110, 200, 0.2);
}

.menu:hover>.menu-items {
  transform: scale(1);
  opacity: 1;
}

<div class="menu">
  <div class="hamburger">
    <div class="hamburger-line"></div>
    <div class="hamburger-line"></div>
    <div class="hamburger-line"></div>
  </div>
  <nav class="menu-items">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#contact">Contact</a>
  </nav>
</div>