Javascript 单击即可关闭导航容器而不隐藏它

因此，我有一个导航栏，当宽度为最大560px时，移动设备会出现汉堡包菜单。 我想做的是，当我点击a:li a href（例如About）时，我想关闭导航容器，而不是让它消失。有办法做到这一点吗

此外，我想这只工作的最大宽度560像素

/*--------------------------------
字体
---------------------------------*/
@导入url（'https://fonts.googleapis.com/css2?family=Noto+Sans:ital，wght@0，400；0700；1400；1700&display=swap'）；
/*--------------------------------
重置
---------------------------------*/
* {
字体系列：“无衬线”，无衬线；
}
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
滚动行为：平滑；
}
/*--------------------------------
全球的
---------------------------------*/
p{
颜色：#7676；
线高：23px；
字体系列：“Nunito”，无衬线；
}
.btn{
颜色：#fff；
填充：30px 60px；
字体大小：20px；
字母间距：3px；
字号：500；
背景色：#daa37f；
边界半径：20px；
文本对齐：居中；
文本转换：大写；
边框底部：5px实心#a37a60；
}
.btn—不透明度{
动画：不透明度3s；
}
/*--------------------------------
导航栏
---------------------------------*/
导航{
背景：rgb（0,0,0）；
背景：rgb（108108108）；
背景：线性梯度（90度，rgba（108，108，108，1）0%，rgba（78，78，78，1）35%，rgba（73，73，73，73，1）78%，rgba（29，29，29，1）100%）；
高度：60px；
右边填充：100px；
}
导航ul{
浮动：对；
}
李国荣{
显示：内联块；
浮动：左；
}
nav ul li：不是（第一个孩子）{
左边距：25px；
}
海军ulli a{
显示：内联块；
大纲：无；
颜色：白色；
字体大小：16px；
文字装饰：无；
字母间距：0.04em；
}
导航ulli a：悬停{
颜色：#d7a256；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：560像素）{
.导航集装箱{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
z指数：-1；
背景：#1f2227；
不透明度：0；
过渡：所有0.2秒缓解；
}
.nav集装箱ul{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
宽度：100%；
}
.nav集装箱ul-li{
显示：块；
浮动：无；
宽度：100%；
文本对齐：右对齐；
边缘底部：10px；
}
.导航集装箱ul li：第n个子（1）a{
过渡延迟：0.2s；
}
.导航集装箱ul li：第n个孩子（2）a{
过渡延迟：0.3s；
}
.导航集装箱ul li：第n个孩子（3）a{
过渡延迟：0.4s；
}
.导航集装箱ul li：第n个孩子（4）a{
过渡延迟：0.5s；
}
.nav容器ul li：非（：第一个孩子）{
左边距：0；
}
.导航集装箱ul li a{
填充：10px 25px；
不透明度：0；
颜色：#fff；
字体大小：24px；
字号：600；
转换：translateY（-20px）；
过渡：所有0.2秒缓解；
}
.导航打开{
位置：固定；
右：10px；
顶部：10px；
显示：块；
宽度：48px；
高度：48px；
光标：指针；
z指数：9999；
边界半径：50%；
}
.导航开放一{
显示：块；
宽度：20px；
高度：2倍；
背景：白色；
边界半径：2px；
左边距：14px；
}
.导航开放i:n个子项（1）{
边缘顶部：16px；
}
.nav开放i:n个孩子（2）{
利润上限：4倍；
不透明度：1；
}
.nav开放i:n个孩子（3）{
利润上限：4倍；
}
}
#导航：选中+导航打开{
变换：旋转（45度）；
}
#导航：选中+导航打开i{
背景：#fff；
转换：转换0.2秒；
}
#导航：选中+。导航打开i:n子项（1）{
变换：translateY（6px）旋转（180度）；
}
#导航：选中+。导航打开i:n子项（2）{
不透明度：0；
}
#导航：选中+。导航打开i:n子项（3）{
变换：translateY（-6px）旋转（90度）；
}
#导航：选中。导航容器{
z指数：9990；
不透明度：1；
}
#导航：选中~导航容器ul li a{
不透明度：1；
变换：translateY（0）；
}
.隐藏{
显示：无；
}
.mt-5、.my-5{
页边距顶部：0rem！重要；
}
/*--------------------------------
横幅
---------------------------------*/
.横幅{
背景图像：url（'../img/banner.jpg'）；
背景位置：中心；
背景尺寸：封面；
背景附件：固定；
显示：表格；
宽度：100%；
身高：93%；
位置：相对位置；
}
.banner_覆盖层{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
显示：表格；
身高：100%；
文本对齐：居中；
}
.banner_集装箱{
显示：表格单元格；
垂直对齐：中间对齐；
}
.banner_向下滚动{
位置：绝对位置；
底部：15px；
左：50%；
左边距：-12px；
光标：指针；
动画：上下移动1s线性无限；
}
/*--------------------------------
横幅动画
---------------------------------*/
@关键帧向上向下移动{
0%, 100% {
底部：0；
}
50% {
底部：10px；
}
}
@关键帧淡入淡出{
从{
转换：translate3d（0,40px，0）
}
到{
变换：translate3d（0,0,0）；
不透明度：1
}
}
@-webkit关键帧fadeInUp{
从{
转换：translate3d（0,40px，0）
}
到{
变换：translate3d（0,0,0）；
不透明度：1
}
}
.动画{
动画持续时间：1s；
动画填充模式：两者都有；
-webkit动画持续时间：1s；
-webkit动画填充模式：两者
}
.animatedFadeInUp{
不透明度：0
}
法代努普先生{
不透明度：0；
动画名称：法德努普；
-webkit动画名称：fadeInUp；
}
/*--------------------------------
卡普塞尔画廊
---------------------------------*/
w-100{
对象匹配：覆盖；
}
/*--------------------------------
菜单区
---------------------------------*/
#菜单{
最小高度：100vh；
宽度：100%；
背景色：白色；
}
.菜单标题{
文本对齐：居中；
填充顶部：150px；
字体大小：70px；
字号：800；
不透明度：50%；
颜色：#dfaf6b；
}
.菜单标题{
文本对齐：居中；
填充顶部：65px；
字体大小：40px；
字体我们