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
元素在 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/