Question

我有一个关闭画布的菜单，当单击切换按钮时，该菜单会弹出-到目前为止很好。所有菜单链接共享相同的类名（在本例中为.nav-link）。单击任何链接时，我都需要关闭菜单，我想已经全部选中了，我想我必须遍历选择项的数组，但是不确定实现它。现在，单击链接时什么也没发生。

我的HTML：

<ul class="nav-list">
   <li class="nav-item"><a href="#" class="nav-link">articles</a></li>
   <li class="nav-item"><a href="#" class="nav-link">tags</a></li>
   <li class="nav-item"><a href="#" class="nav-link">links</a></li>
   <li class="nav-item"><a href="#" class="nav-link">archive</a></li>
</ul>

我的CSS：

.nav-list {
    margin: 0;
    margin-top: 3.2em;
    padding: 0;
    background: #777;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(.5, 0, .5, 1);
}

我的JS：

const navToggle = document.querySelector('.nav-toggle')
const navLink = document.querySelectorAll('.nav-link')

navToggle.addEventListener('click', () => {
    document.body.classList.toggle('nav-open')
})

navLink.addEventListener('click', () => {
    document.body.classList.remove('nav-open')
})

Answer 1

您正试图将事件侦听器添加到节点集合（build.rs querySelectorAll与{{1}对应.nav-link）。您可以遍历集合并将querySelector事件侦听器添加到每个项目，或仅侦听.nav-toggle s的父元素：

click

Answer 2

您必须使用循环，因为querySelectorAll返回一个数组。

const navToggle = document.querySelector('.nav-toggle')
const navLink = document.querySelectorAll('.nav-link')

navToggle.addEventListener('click', () => {
    document.body.classList.toggle('nav-open')
})

for (var i = 0; i < navLink.length; ++i) {
    navLink[i].addEventListener('click', () => {
      if(navToggle.classList.contains('nav-toggle')){
        (navToggle.classList.remove('nav-toggle');
      }
    });
}

单击链接时关闭菜单

2 个答案: