javascript - 解决导航栏中 li 元素消失的问题(HTML、CSS、JS)

标签 javascript html css navbar

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. 视口(viewport)小于 1050 像素,因此显示汉堡包按钮
  2. 单击汉堡按钮以下拉形式显示菜单。汉堡按钮更改为“X”。
  3. “X”被点击。 JS 代码将所有 li 元素更改为 display: none
  4. 问题:视口(viewport)增加到超过 1050 像素的断点。由于 li 元素更改为 display: none,因此不会显示菜单。

非常感谢有关如何解决此问题的建议。

此外,还有一个较小但棘手的问题。

  1. 视口(viewport)小于 1050 像素,因此显示汉堡包按钮
  2. 单击汉堡按钮以下拉形式显示菜单。汉堡按钮更改为“X”。
  3. 视口(viewport)增加到 1050p 断点以上,然后又回到断点以下。由于所有 li 元素在 JS 代码中都设置为 display: block,因此会出现下拉菜单。我想做到这一点,以便每当视口(viewport)大小减小时都会出现汉堡包图标。

感谢大家的帮助!

最佳答案

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

而不是显示和隐藏每个人 <li> ,仅隐藏父项 <ul> 。这也将隐藏所有的 child 在里面。

下面的示例添加和删除 active类到 #menu单击菜单按钮时的元素。此事件类显示 #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>

关于javascript - 解决导航栏中 li 元素消失的问题(HTML、CSS、JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67289256/

相关文章:

javascript - 使用jQuery触发html onclick事件

javascript - Particles.js 中的多个图像作为形状

javascript - 创建一个缓冲区并对其进行处理

javascript - Woocommerce - blockUi 风格

javascript - 模态出现时删除滚动条

javascript - Jquery 菜单和照片库在 IE 中不起作用

javascript - 监听某个父元素和某个子元素之间的事件

javascript - 使用 Niceforms 有什么问题吗?

jquery - 页面的一半被链接(在鼠标悬停时突出显示)时不应该?

php - 如何仅刷新php中的特定功能?