Javascript 点击菜单内的链接后，如何将汉堡菜单图标重置为未打开？

所以我决定给我的汉堡包菜单设置动画，它以前是没有动画的，所以这个问题从一开始就无关紧要了

动画从一个标准的汉堡包式菜单开始，它有几个链接到主页的不同区域。单击时，我设置了菜单的动画，使其从汉堡包变为x，向访问者表明他们可以通过单击x来关闭菜单。但我遇到了一个问题，在点击汉堡菜单中的一个链接后，图标没有从x重置回汉堡，这就搞乱了菜单第二次打开的方式。如果访问者再次打开它，当点击x时，x会变成汉堡包，这没有任何意义

不管怎么说，我只是想知道是否有一种方法，我可以这样做，当菜单中的链接被点击时，x返回到它未打开的汉堡形式。这是我的密码：

var links=document.querySelectorAll（'.menu a'）；
var linksLength=links.length
对于（变量i=0；i
.header{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：327px；
高度：70像素；
线高：70px；
左侧填充：15px；
字体系列：'Burbank'，'Alegreya Sans SC'，'Alegreya Sans SC Black'，Sans serif；
字体大小：40px；
颜色：#ffffff；
z指数：2；
用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-webkit用户选择：无；
}
.标题{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：327px；
高度：67px；
左侧填充：15px；
z指数：3；
}
.导航{
位置：绝对位置；
顶部：0px；
高度：70像素；
背景色：#223861；
盒影：0px 3px 10px 0px rgba（39,38,38,0.6）；
-网络工具包盒阴影：0px 3px 10px 0px rgba（39,38,38,0.6）；
-moz盒阴影：0px 3px 10px 0px rgba（39,38,38,0.6）；
文本对齐：右对齐；
z指数：1；
用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-webkit用户选择：无；
}
.图标{
位置：相对位置；
浮动：对；
宽度：100px；
高度：70像素；
左侧填充：13px；
光标：指针；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
}
.图标跨度{
位置：绝对位置；
左：0；
显示：块；
高度：5px；
宽度：45px；
左边距：75px；
边缘顶部：18px；
背景：#ffffff；
边界半径：4px；
不透明度：1；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.25s易入易出；
-moz转换：.25s易入易出；
-o型过渡：.25秒缓进缓出；
转换：.25秒轻松输入输出；
}
.图标跨度：第n个子项（1）{
顶部：0px；
}
.图标跨度：第n个子项（2）{
顶部：12px；
}
.图标跨度：第n个子项（3）{
顶部：24px；
}
.icon.open跨度：第n个子项（1）{
顶部：12px；
-webkit变换：旋转（135度）；
-moz变换：旋转（135度）；
-o变换：旋转（135度）；
变换：旋转（135度）；
}
.icon.open跨度：第n个子项（2）{
不透明度：0；
左：-60px；
}
.icon.open跨度：第n个子项（3）{
顶部：12px；
-webkit变换：旋转（-135度）；
-moz变换：旋转（-135度）；
-o变换：旋转（-135度）；
变换：旋转（-135度）；
}
.标题{
宽度：90%；
}
.图标{
显示：块；
右边填充：22px；
光标：指针；
}
.菜单{
最大高度：0px；
过渡：最大高度。5s轻松进出；
不透明度：0；
溢出：隐藏；
}
.菜单a{
显示：块；
高度：8vh；
线路高度：8vh；
边际：0px；
填充：0px 0px；
边框底部：1px实心#eaeb；
}
#拨动{
显示：无；
}
#切换：选中+菜单{
最大高度：800px；
不透明度：1；
}
#切换：未选中+菜单{
最大高度：0px；
不透明度：1；
}
只需将此单击处理程序添加到
$（document）.ready（）
函数中，即可在单击其中一个菜单链接时从汉堡图标中删除
打开
CSS类：

    $('.menu a').click(function() {
       $('.icon').removeClass('open');
    });

您也可以通过
纯CSS
来实现这一点


.navigation\uu复选框{
显示：无
}
.导航按钮{
身高：7雷姆；
宽度：7雷姆；
位置：固定；
顶部：1rem；
左：1rem；
边界半径：50%；
z指数：2000；
盒影：0 1rem 3rem rgba（0,0,0,0.1）；
文本对齐：居中；
光标：指针
}
.导航图标{
位置：相对位置；
最高保证金：3.5雷姆；
用户选择：无；
}
.导航图标，
.导航图标：：之前，
.navigation__图标：：之后{
宽度：3rem；
高度：2倍；
背景色：#333；
显示：内联块
}
.导航图标：：之前，
.navigation__图标：：之后{
内容：“；
位置：绝对位置；
左：0；
转换：所有.2s
}
.navigation__图标：：之前{
顶部：-.8rem
}
.navigation__图标：：之后{
顶部：.8rem
}
.navigation\uuu按钮：悬停。navigation\uuu图标：：之前{
顶部：-1rem
}
.navigation\uuuu按钮：悬停。navigation\uuuu图标：：之后{
顶部：1rem
}
.navigation\u复选框：选中+.navigation\u按钮。navigation\u图标{
背景色：透明
}
.navigation\u复选框：选中+.navigation\u按钮。navigation\u图标：：before{
排名：0；
变换：旋转（135度）
}
.navigation\u复选框：选中+.navigation\u按钮。navigation\u图标：：之后{
排名：0；
变换：旋转（-135度）
}
我输入的代码片段似乎无法正常工作。我希望任何看到它的人都能从代码中看到我的意思