如何最小化汉堡菜单的 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

这会起作用

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

但我不推荐这样做，因为有时它会令人困惑

Answer 2

只用 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>

Answer 3

我用 :focus-within 创建了一个无-JavaScript 汉堡包菜单。我将打开图标（位置：绝对）放在导航内，将关闭图标（也是位置：绝对）放在导航外。然后，我仅在导航为：focus-within 时启用导航的可见性，在导航为：focus-within 时禁用打开图标的可见性，并仅在导航为：focus-within 时启用关闭图标的可见性（与+).

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

How can I minimize JavaScript for a hamburger menu?

html

javascript

css

hamburger-menu