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

Question

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

<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

而不是对每个列表项 display:none 隐藏孔列表 (ul) itself.And 然后使用 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';
    }
 }

Answer 2

后来我实际上找到了解决这个问题的方法。我尝试根据评论 document.querySelectorAll(".main-nav li") 中某人的建议更改我的代码，但这在我的控制台中引发了一个错误，其中显示 Cannot read property 'display' of undefined。那是因为querySelectorAll returns 一个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'
        }
    }

}

感谢所有帮助过我的人，希望你们今天过得愉快:)

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

I made a hamburger menu button but it only toggles the first element

html

javascript

toggle

dom-events

hamburger-menu