解决导航栏中 li 元素消失的问题（HTML、CSS、JS）

Question

document.addEventListener("DOMContentLoaded", () => {
  let menuBtn = document.querySelector("#menu-button");
  let menu = document.querySelector("#menu");
  let menuItems = menu.getElementsByTagName("li");

  menuBtn.addEventListener("click", e => {
    if (e.target.innerText === ("✕")) {
      e.target.innerText = "☰";
      [...menuItems].forEach(item => item.style.display = "none");
    } else if (e.target.innerText === "☰") {
      e.target.innerText = "✕";
      [...menuItems].forEach(item => item.style.display = "block");
    }
  });
});

  header {
  width: 100%;
  height: 100px;
}

#menu {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  justify-content: space-around;
  font-size: 2rem;
}

#menu-button {
  display: none;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1050px) {
  #menu {
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #menu li {
    padding: 1.5rem;
    display: none;
  }
  #menu-button {
    display: block;
    font-size: 3rem;
    cursor: pointer;
    outline: none;
    border: none;
  }
}

<header>
  <nav>
    <button id="menu-button">☰</button>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

这是一个简单的导航菜单，采用桌面优先方法，使用flexbox。

1. 视口小于 1050 像素，因此显示汉堡按钮
2. 单击汉堡按钮以下拉形式显示菜单。汉堡按钮变为“X”。
3. “X”被点击。 JS 代码将所有li 元素更改为display: none
4. 问题：视口增加到超过 1050 像素的断点。由于li 元素已更改为display: none，因此未显示菜单。

不胜感激有关如何解决此问题的建议。

还有，小而烦人的问题。

1. 视口小于 1050 像素，因此显示汉堡按钮
2. 单击汉堡按钮以下拉形式显示菜单。汉堡按钮变为“X”。
3. 视口增加到超过 1050p 的断点，然后回到断点以下。由于所有li 元素在JS 代码中都设置为display: block，因此会出现下拉菜单。我想让它在视口大小减小时出现汉堡图标。

感谢大家的帮助！

Answer 1

添加和删除 CSS 类，而不是设置内联样式。这样做会给 CSS 更多的控制权。内联样式只能使用 !important 覆盖，这将使其更难覆盖。

不显示和隐藏每个<li>，只隐藏父<ul>。这也将隐藏其中的所有孩子。

下面的示例在单击菜单按钮时向#menu 元素添加和删除active 类。这个活动类在移动设备上显示#menu 隐藏的位置。在较大的屏幕上，始终显示#menu。

document.addEventListener("DOMContentLoaded", () => {
  let menuBtn = document.querySelector("#menu-button");
  let menu = document.querySelector("#menu");

  // First question: 
  // Add a class instead of inline styles.
  menuBtn.addEventListener("click", e => {
    if (e.target.innerText === ("✕")) {
      e.target.innerText = "☰";
      menu.classList.remove('active');
    } else if (e.target.innerText === "☰") {
      e.target.innerText = "✕";
      menu.classList.add('active');
    }
  });
  
  // Second question:
  // Watch a media query, reset the button and hide the 
  // menu when changing from large to a small size.
  const mediaQuery = window.matchMedia('screen and (max-width: 1050px)');
  mediaQuery.addEventListener('change', ({ matches }) => {
    if (!matches) return;
    menuBtn.innerText = "☰";
    menu.classList.remove('active');
  });
});

header {
  width: 100%;
  height: 100px;
}

#menu {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  justify-content: space-around;
  font-size: 2rem;
}

#menu-button {
  display: none;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1050px) {
  #menu {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  
  #menu.active {
    display: flex;
  }

  #menu li {
    padding: 1.5rem;
  }
  
  #menu-button {
    display: block;
    font-size: 3rem;
    cursor: pointer;
    outline: none;
    border: none;
  }

<header>
  <nav>
    <button id="menu-button">☰</button>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>