如何将汉堡菜单的 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");
  }
};

- Swapnil Kotkar

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>

- Timothy Alexis Vass

Answer 2

我使用:focus-within创建了一个无需JavaScript的汉堡菜单。我将打开图标（position: absolute）放在导航内部，关闭图标（也是position: absolute）放在导航外部。然后，只有当它处于:focus-within状态时，我才启用导航的可见性，禁用导航处于:focus-within状态时的打开图标的可见性，并仅在导航处于:focus-within状态时启用关闭图标的可见性（使用+）。

- RatajS

Answer 3

这将会起作用

document.querySelector(".menu-btn").onclick = () => {
    document.querySelector(".hamburger").classList.toggle("active");
    document.querySelector(".menu-list").classList.toggle("active");
    hamburgerMenu.classList.toggle("active");
};

document.querySelector(".menu-list").onclick = (e) => {
    if (e.target.classList !== "menu-btn") {
        var classes = [".hamburger", ".menu-list", ".menu-btn"];
        classes.forEach(function(item, index) { document.querySelector(item).classList.remove("active"); });
    }
};

但我不建议这样做，因为有时会让人感到困惑。

- Aditya