Javascript 重新加载动画（切换菜单）JS

我是javascript的新手，所以我来这里寻求你的帮助。 这是一个有JS响应的导航栏

当用户单击切换按钮时，菜单将显示（带有动画）或消失。完成了。但是我想做更多的事情，当用户点击这个菜单的一个链接时，菜单被隐藏了。我的问题是，当用户在此之后再次单击切换按钮时，动画不起作用，因此菜单不会出现。加载页面时，它只工作一次。 我想动画运行，每次我们点击这个切换按钮，无论是关闭菜单通过切换按钮或一个链接

我试图在菜单关闭时删除动画

link.addEventListener('click', function(){
        link.style.animation = '';
    })

在forEach中，当我单击“切换”按钮时，只会显示一个链接，因为动画仅在单击的链接上删除，而不会在其他链接上删除。我不知道该怎么做才能使它起作用。。请帮忙

---

Fiddle:

您不应该在其他事件侦听器中添加事件侦听器。通过将所有切换菜单的代码移到一个函数中，并将其作为单击事件侦听器添加到burger按钮和每个导航链接中，可以大大简化代码

JSFiddle：

const导航幻灯片=（）=>{
//切换按钮
const burger=document.querySelector（'.burger'）；
//两张名单
const navs=document.querySelectorAll（'.nav links'）；
//获取个人链接
const navLinks=document.queryselectoral（'.nav links li'）；
函数切换菜单（）{
导航。forEach（导航=>{
导航类列表切换（“导航激活”）；
});
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=''；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.7}s`；
}
});
burger.classList.toggle（'toggle'）；
}
burger.addEventListener（“单击”，切换菜单）；
navLinks.forEach（link=>{
link.addEventListener（“单击”，切换菜单）；
});
}
导航幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
字体系列：“机器人浓缩”，无衬线；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：100px；
背景色：#fff；
位置：相对位置；
盒影：2PX2PX4PX00000029；
}
.logo img{
宽度：120px；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：40%；
}
.nav链接李{
列表样式类型：无；
}
.导航链接a{
颜色：#000；
文字装饰：无；
字母间距：3px；
字体大小：粗体；
字号：1em；
字母间距：3.2px；
}
/*流动的*/
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：#000；
保证金：5px；
过渡：所有0.3秒缓解；
}
@媒体屏幕和屏幕（最大宽度：768px）{
/*
.标志{
显示：无；
}
*/
身体{
溢出x：隐藏；
}
.导航链接{
z指数：3000；
位置：绝对位置；
左：0px；
背景色：#fff；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；/*宽度栏菜单*/
转化：translateX（-100%）；
过渡：0.5s轻松过渡；
}
.左链接{
高度：36vh；
顶部：100px；
}
.链接对吗{
高度：计算（100vh-（36vh+100px））；
顶部：计算（36vh+100px）；
}
.nav链接李{
不透明度：0；/*隐藏链接*/
}
.汉堡{
显示：块；
位置：绝对位置；
左：5%；
光标：指针；
}
}
/*当点击汉堡时，我们添加了这个类*/
.导航激活{
转化：translateX（0%）；
}
/*动画*/
/*动画链接*/
@关键帧navLinkFade{
从{
不透明度：0；
转换：translateX（-50px）；
}到{
不透明度：1；
转换：translateX（0px）；
}
}
@关键帧navFade{
从{
盒影：4px2px2px1pRGBA（0,0,0,0）；
}到{
盒影：4px2px2px1pRGBA（0,0,0,0.1）；
}
}
/*动画切换按钮*/
.toggle.line1{
变换：旋转（-45度）平移（-5px，6px）；
}
.toggle.line2{
不透明度：0；
}
.toggle.line3{
变换：旋转（45度）平移（-5px，-6px）；
}





标志





不应在其他事件侦听器中添加事件侦听器。通过将所有切换菜单的代码移到一个函数中，并将其作为单击事件侦听器添加到burger按钮和每个导航链接中，可以大大简化代码

JSFiddle：


const导航幻灯片=（）=>{
//切换按钮
const burger=document.querySelector（'.burger'）；
//两张名单
const navs=document.querySelectorAll（'.nav links'）；
//获取个人链接
const navLinks=document.queryselectoral（'.nav links li'）；
函数切换菜单（）{
导航。forEach（导航=>{
导航类列表切换（“导航激活”）；
});
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=''；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.7}s`；
}
});
burger.classList.toggle（'toggle'）；
}
burger.addEventListener（“单击”，切换菜单）；
navLinks.forEach（link=>{
link.addEventListener（“单击”，切换菜单）；
});
}
导航幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
字体系列：“机器人浓缩”，无衬线；
显示器：flex；