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

【问题标题】：How can I minimize JavaScript for a hamburger menu?如何最小化汉堡菜单的 JavaScript？
【发布时间】：2021-07-31 07:08:31
【问题描述】：

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

【问题讨论】：

标签： javascript html css hamburger-menu

【解决方案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>

【讨论】：

【解决方案2】：

这会起作用

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

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

【讨论】：

【解决方案3】：

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

【讨论】：