Javascript 如何隐藏下拉菜单时，点击菜单链接与香草JS？

我有这个漂亮的菜单，并试图关闭菜单时，点击菜单内的链接。但是使用

querySelectorAll

我得到了一个错误

navLinks。addEventListener

不是一个函数

当我使用

querySelector

时，只有第一个链接在响应

我可以去给每个链接另一个类，使5个相同的函数，但我想要干代码。 正确的方法是什么

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
burger.addEventListener（'click'，（）=>{
//切换导航
nav.classList.toggle（'nav-active'）；
//设置导航链接的动画
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.5}s`；
}
});
//汉堡动画
burger.classList.toggle（'toggle'）；
});
}
导航幻灯片（）
*{
边际：0px；
填充：0px；
-webkit框大小：边框框；
框大小：边框框；
}
导航{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-pack：分发；
证明内容：周围的空间；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最小高度：8vh；
背景色：#5e4954；
字体系列：“Poppins”，无衬线；
}
导航标志{
颜色：#E2；
字母间距：5px；
字体大小：20px；
}
导航链接{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-pack：分发；
证明内容：周围的空间；
宽度：30%；
}
导航，导航链接李{
列表样式：无；
}
导航。导航链接李a{
颜色：白色；
文字装饰：无；
字母间距：3px；
字体大小：粗体；
字体大小：0.8rem；
}
导航汉堡{
显示：无；
}
海军汉堡分部{
宽度：25px；
高度：3倍；
背景色：#E2；
保证金：5px；
-webkit过渡：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：60%！重要；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
背景色：#5e4954；
宽度：100%！重要；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
-webkit转换：-webkit转换0.5s易用性；
过渡：-webkit转换0.5s易用性；
过渡：0.5s轻松过渡；
转换：转换0.5s易用性，-webkit转换0.5s易用性；
}
body.nav links li{
不透明度：0；
}
身体，汉堡{
显示：块；
光标：指针；
}
}
.导航激活{
-webkit转换：translateX（0%）！重要；
转化：translateX（0%）！重要；
}
@-webkit关键帧navLinkFade{
从{
不透明度：0；
-webkit转换：translateX（50px）；
转换：translateX（50px）；
}
到{
不透明度：1；
-webkit转换：translateX（0px）；
转换：translateX（0px）；
}
}
@关键帧navLinkFade{
从{
不透明度：0；
-webkit转换：translateX（50px）；
转换：translateX（50px）；
}
到{
不透明度：1；
-webkit转换：translateX（0px）；
转换：translateX（0px）；
}
}
.toggle.line1{
-webkit变换：旋转（-45度）平移（-5px，6px）；
变换：旋转（-45度）平移（-5px，6px）；
}
.toggle.line2{
不透明度：0；
}
.toggle.line3{
-webkit变换：旋转（45度）平移（-5px，-6px）；
变换：旋转（45度）平移（-5px，-6px）；
}
/*#sourceMappingURL=style.css.map*/

响应导航条
导航






您可以将链接变量
link.addEventListener（'click'，（）=>{…}）上的事件添加到
querySelectorAll（'.nav links li'）上的循环中。


const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
navLinks.forEach（（链接，索引）=>{
link.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
burger.classList.toggle（'toggle'）；
nav.classList.toggle（'nav-active'）；
navLinks.forEach（setStyleLink）
})
});
burger.addEventListener（'click'，（）=>{
//切换导航
nav.classList.toggle（'nav-active'）；
//设置导航链接的动画
navLinks.forEach（setStyleLink）；
//汉堡动画
burger.classList.toggle（'toggle'）；
});
}
功能设置样式链接（el，索引）{
if（el.style.animation）{
el.style.animation=''
}否则{
el.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.5}s`；
}
}
导航幻灯片（）
*{
边际：0px；
填充：0px；
-webkit框大小：边框框；
框大小：边框框；
}
导航{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-pack：分发；
证明内容：周围的空间；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最小高度：8vh；
背景色：#5e4954；
字体系列：“波比”
document.addEventListener("click", (e) => {
  const target = e.target;
  if (target.closest(".nav-links a") {
    //do domething
  }
});

<script>
const navigation = document.querySelector('.navigation');
document.querySelector('.toggle').onclick = function() {
  this.classList.toggle('active');
  navigation.classList.toggle('active');
}
</script>