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

问题描述：

所以我有这个JS移动导航菜单。当菜单按钮被点击时，菜单打开，然后可以通过再次按下菜单按钮关闭。我还希望菜单在单击其中一个导航项目时关闭。使用下面的代码，我设法使菜单在点击第一个项目时关闭，但由于我自己不知道的原因，它不适用于其他三个导航项目。这可能与我选择nav-item课程的方式有关吗？另外，我的Javascript知识非常有限，所以可能会有一些明显的缺失。当点击第一个以外的项目时，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>

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') 
});

答

方法document.querySelector返回第一发现元件。如果要将事件侦听器添加到多个元素，则应该使用document.querySelectorAll方法。您将收到一个元素列表。你想添加事件监听器给他们每个人。

嗨，改变它从'document.querySelector'到'window.querySelectorAll'使它没有任何项目关闭菜单。我也尝试过'document.querySelectorAll'，它也做了同样的事情。 – petecampbell

document.querySelectorAll返回元素列表。如果要将eventListener应用于每个需要遍历列表的元素。有很多方法可以做到这一点。例如。使用一个简单的循环 const navItems = document.querySelectorAll（'。nav-item'）''for（let i = 0; i

如果你仍然有问题，这里的解决方案是：'navItems.forEach（ function（navItem）{ navItem.addEventListener（'click'，function（）{ sidebar.classList.toggle 'is-hidden'） }） } ）;' –

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

相关推荐