Javascript 单击链接时关闭菜单

我有一个离开画布的菜单，当点击切换按钮时，它会飞出来——到目前为止还不错。所有菜单链接共享相同的类名（在本例中为.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>

我的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')
})

---

您正在尝试将事件侦听器添加到节点集合（

querySelectorAll

对于

.nav链接

与

查询选择器

对于

.nav切换

）。您可以在集合中迭代并将

单击

事件侦听器添加到每个项目中，或者只需侦听

.nav链接的父元素

s：

const navToggle=document.querySelector（“.nav toggle”）
//用更合理的方法来取代这一点
const navLinkParent=document.querySelector（'.nav link'）.parentElement；
navToggle.addEventListener（'单击'，（）=>{
document.body.classList.toggle（'nav-open'）
})
//这是向一个元素添加单击侦听器
navLinkParent.addEventListener（'单击'，（事件）=>{
//检查单击的元素是否与您要查找的内容匹配
if（event.target.classList.contains（'nav-link'））{
document.body.classList.remove（'nav-open'）
}
})

您必须使用循环，因为

querySelectorAll

返回数组

const navToggle=document.querySelector（“.nav toggle”）
const navLink=document.queryselectoral（“.nav link”）
navToggle.addEventListener（'单击'，（）=>{
document.body.classList.toggle（'nav-open'）
})
对于（变量i=0；i{
if（navToggle.classList.contains（'nav-toggle'））{
（navToggle.classList.remove（'nav-toggle'）；
}
});
}

请与您分享相关代码/css，以演示问题的可行性，它工作得非常完美：）

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