Question

所以我有这个JS移动导航菜单。单击菜单按钮后，菜单将打开，然后再次按下菜单按钮即可关闭。我还希望在单击其中一个导航项时关闭菜单。使用下面的代码，我设法在单击第一个项目时关闭菜单，但由于我不知道的原因，它对其他三个导航项目不起作用。它可能与我选择nav-item类的方式有关吗？此外，我的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.querySelector返回第一个找到的元素。如果要将事件侦听器添加到多个元素，则应使用document.querySelectorAll方法。您将收到一个元素列表。您希望为每个事件添加事件侦听器。

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

1 个答案: