javascript - 单击链接时关闭菜单

Question

我有一个 Canvas 外菜单，当单击切换按钮时该菜单会飞出 - 到目前为止一切顺利。所有菜单链接共享相同的类名(在本例中为 .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

您正在尝试将事件监听器添加到节点集合 (querySelectorAll 对于 .nav-link 与 querySelector 对于 .nav-toggle)。您可以迭代集合并向每个元素添加 click 事件监听器，或者仅监听 .nav-link 的父元素:

const navToggle = document.querySelector('.nav-toggle')
// replace this with something more sensible
const navLinkParent = document.querySelector('.nav-link').parentElement;

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

// this is adding a click listener to ONE element
navLinkParent.addEventListener('click', (event) => {
  // check if the clicked element matches what you're after
  if (event.target.classList.contains('nav-link')) {
    document.body.classList.remove('nav-open')
  }
})