JavaScript导航菜单不支持'；单击项目（第一个项目除外）时不会关闭

所以我有这个JS移动导航菜单。单击菜单按钮时，菜单打开，然后再次按下菜单按钮即可关闭。我还希望在单击其中一个导航项时关闭菜单。使用下面的代码，我成功地在单击第一个项目时关闭了菜单，但由于我自己不知道的原因，它对其他三个导航项目不起作用。这可能与我选择

导航项目的方式有关吗？此外，我的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>

方法
document.querySelector
返回找到的第一个元素。如果要将事件侦听器添加到多个元素，则应改用
document.querySelectorAll
方法。您将收到一个元素列表。您想将事件监听器添加到它们中的每一个。
方法
文档。querySelector
返回第一个找到的元素。如果要将事件侦听器添加到多个元素，则应改用
document.querySelectorAll
方法。您将收到一个元素列表。您想将事件侦听器添加到它们中的每一个。
Hi，将其从
document.querySelector
更改为
window.queryselectoral
使其无法关闭菜单。我还尝试了
document.querySelectorAll
，它也这样做了。document.querySelectorAll返回元素列表。如果要将eventListener应用于每个元素，则需要遍历列表。有很多方法可以做到这一点。例如，使用一个简单的for循环
const navItems=document.queryselectoral（'.nav item'）
for（让i=0；如果仍然存在问题，这里是解决方案：
navItems.forEach（函数（navItem）{navItem.addEventListener（'click'，函数（）{sidebar.classList.toggle（'is-hidden'）}）
刚刚尝试了这个，几乎可以肯定它会工作，因为它看起来应该工作，但它没有……这可能是因为其他代码不正确吗？谢谢！好的，所以刚刚检查控制台，注意到它说
类型错误：navItems.forEach不是一个函数
。这意味着什么？嗨，将其从
document.querySele更改为ctor
到
窗口。querySelectorAll
使所有项目都无法关闭菜单。我还尝试了
文档。querySelectorAll
并执行了相同的操作。document.querySelectorAll返回元素列表。如果要将eventListener应用于需要在列表中迭代的每个元素，可以通过多种方法来实现例如，使用一个简单的for循环
const navItems=document.querySelectorAll（'.nav item'）
for（设i=0；如果您仍然存在问题，这里是解决方案：
navItems.forEach（函数（navItem）{navItem.addEventListener（'click'，函数（）{sidebar.classList.toggle（'is-hidden'）}）
刚刚尝试了这个，几乎可以肯定它会工作，因为它看起来应该工作，但没有……这可能是因为其他代码不正确吗？谢谢！好的，所以检查控制台，发现它说
TypeError:navItems.forEach不是一个函数。
。这是什么意思？
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')
});