javascript - 解决导航栏中 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 .

视口(viewport)小于 1050 像素，因此显示汉堡按钮

单击汉堡包按钮以下拉形式显示菜单。汉堡按钮变为“X”。

单击“X”。 JS代码全部更改li元素到 display: none

问题:视口(viewport)增加到超过 1050 像素的断点。由于li元素已更改为 display: none , 菜单未显示。

希望就如何解决这个问题提出建议。
此外，较小但令人烦恼的问题。

视口(viewport)小于 1050 像素，因此显示汉堡按钮

单击汉堡包按钮以下拉形式显示菜单。汉堡按钮变为“X”。

视口(viewport)增加到超过 1050p 的断点，然后回到断点以下。由于所有li元素设置为 display: block在 JS 代码中，出现下拉菜单。我想让它在视口(viewport)大小减小时出现汉堡图标。

感谢所有和任何帮助!

Answer 1

添加和删​​除 CSS 类而不是设置内联样式。这样做会给 CSS 更多的控制权。只能使用 !important 覆盖内联样式这将使覆盖变得更加困难。
而不是显示和隐藏每个人<li> , 只隐藏父 <ul> .这也将隐藏其中的所有 child 。
下面的示例添加和删除 active类到#menu单击菜单按钮时的元素。此事件类(class)显示 #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>