JavaScript 单击第一个项目以外的项目时，导航菜单不会关闭

Question

所以我得到了这个 JS 移动导航菜单。单击菜单按钮时，菜单打开，然后可以通过再次按菜单按钮关闭。我还希望在单击其中一个导航项时关闭菜单。使用下面的代码，我设法在单击第一个项目时关闭菜单，但由于我自己不知道的原因，它不适用于其他三个导航项目。这可能与我选择 nav-item class 的方式有关吗？另外，我的 Javascript 知识非常有限，所以我可能遗漏了一些明显的东西。

HTML

<nav class="main-nav">
            <a href="#" class="nav-menu"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <div class="sidebar is-hidden">
            <ul>
                <li><a class="nav-item page-scroll" href="#about">ABOUT</a></li>
                <li><a class="nav-item page-scroll" href="#framing">FRAMING</a></li>
                <li><a class="nav-item page-scroll" href="#gallery">GALLERY</a></li>
                <li><a class="nav-item page-scroll" href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </nav>

JS

const button = document.querySelector('.nav-menu')
const sidebar = document.querySelector('.sidebar')
const item = document.querySelector('.nav-item')

button.addEventListener('click', function (e) {
  e.preventDefault();
  sidebar.classList.toggle('is-hidden')
});

item.addEventListener('click', function () {
  sidebar.classList.toggle('is-hidden')
});

Answer 1

方法document.querySelectorreturns第一个找到的元素。如果要为多个元素添加事件侦听器，则应改用 document.querySelectorAll 方法。您将收到一个元素列表。您想为它们中的每一个添加事件侦听器。

JavaScript 单击第一个项目以外的项目时，导航菜单不会关闭

JavaScript nav menu doesn't close when item, other than the first, is clicked

javascript

menu

toggle

nav