时间戳

首页 > 解决方案 > 我做了一个汉堡菜单按钮，但它只切换第一个元素

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

问题描述

所以我做了我的小汉堡图标，我做了我的切换 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%;
    }

我不太确定解决方案可能是什么，任何形式的帮助都会非常感激

标签： javascripthtmltoggledom-eventshamburger-menu

解决方案

我后来实际上找到了解决这个问题的方法。我尝试根据评论中某人的建议更改我的代码，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'
        }
    }

}

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

推荐阅读