我做了一个汉堡菜单按钮，但它只切换第一个元素

Question

所以我做了我的小汉堡图标，我做了我的切换JS函数，但它似乎只切换了列表的第一个元素。这是我的HTML标题和汉堡菜单的按钮：

<button onclick='hideBlock()' class="hamburger">
<span>&mdash;</span>
<span>&mdash;</span>
<span>&mdash;</span>
</button>
<header>
<nav>
<div class="row">
<!-- <img src="resurse/img/logo.png" alt="logo-alb" class="logo"> -->
<ul class="main-nav">
<li class="e-nav"><a href="#descriere">Descriere magazin</a></li>
<li class="e-nav"><a href="#functioneaza">Cum functioneaza ?</a></li>
<li class="e-nav"><a href="#adresa">Adresa</a></li>
<li class="e-nav"><a href="#recenzii">Recenzii</a></li>
<li class="e-nav"><a href="#promotii">Promotii</a></li>
<li class="e-nav"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Cel mai bun magazin. <br> Cele mai bune preturi.</h1>
<a href="#adresa" class="btn btn-full">Vreau sa cumpar</a>
<a href="#promotii" class="btn btn-ghost">Arata-mi mai mult</a>
</div>
</header>

这是我尝试过的JS函数：

function hideBlock() {
x = document.querySelector('.main-nav .e-nav');
if (x.style.display === 'none') {
x.style.display = 'block'
} else {
x.style.display = 'none'
}
}

另外，这是我尝试在其中实现的查询的 CSS：

.main-nav .e-nav{
display: none;
text-align: center;
margin-top: 20px;
font-size: 120%;
}

我不太确定解决方案是什么，任何形式的帮助都会得到极大的帮助

Answer 1

我实际上后来找到了解决这个问题的方法。我尝试根据评论document.querySelectorAll(".main-nav li")中某人的建议更改我的代码，但这在我的控制台中抛出了一个错误，该错误指出Cannot read property 'display' of undefined.这是因为 querySelectorAll 返回一个 nodeList。因此，为了解决这个问题，我必须遍历每个节点，因为我希望按下按钮即可显示和隐藏所有项目。所以我按如下方式循环我的代码：

function hideBlock() {
var x = document.querySelectorAll('.main-nav li');
for (var i = 0; i < x.length; i++) {
if (x[i].style.display === 'none') {
x[i].style.display = 'block'
} else {
x[i].style.display = 'none'
}
}
}

感谢所有试图帮助我的人，希望你有一个美好的一天:)

Answer 2

不是对每个列表项显示：无，而是隐藏孔列表(ul(本身。然后使用 js 切换它。

.main-nav {
display: none;
}
.main-nav .e-nav {
list-style-type: none;
text-align: center;
margin-top: 20px;
font-size: 120%;
}
<button onclick='hideBlock()' class="hamburger">
<span>&mdash;</span>
<span>&mdash;</span>
<span>&mdash;</span>
</button>
<header>
<nav>
<div class="row">
<!-- <img src="resurse/img/logo.png" alt="logo-alb" class="logo"> -->
<ul class="main-nav">
<li class="e-nav"><a href="#descriere">Descriere magazin</a></li>
<li class="e-nav"><a href="#functioneaza">Cum functioneaza ?</a></li>
<li class="e-nav"><a href="#adresa">Adresa</a></li>
<li class="e-nav"><a href="#recenzii">Recenzii</a></li>
<li class="e-nav"><a href="#promotii">Promotii</a></li>
<li class="e-nav"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Cel mai bun magazin. <br> Cele mai bune preturi.</h1>
<a href="#adresa" class="btn btn-full">Vreau sa cumpar</a>
<a href="#promotii" class="btn btn-ghost">Arata-mi mai mult</a>
</div>
</header>
function hideBlock(){
x = document.querySelector('.main-nav');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}