Javascript 当点击JS链接时，如何关闭CSS菜单？

所以我制作了一个纯CSS菜单，除了点击链接外，所有的东西看起来都是我想要的。在我的单页布局中，单击链接会导航到页面的某个部分，但单击链接后，它会平滑地滚动到该部分，并且菜单仍然可见。我读过多个类似的问题，但没有一个解决方案对我有效。我更喜欢使用JavaScript而不使用jQuery

我的网站仍在运行中；看看它，看看手机大小会发生什么

这是我的密码：

/*导航*/
.标题{
宽度：100%；
位置：固定；
排名：0；
背景：线性梯度（rgba（0,0,0,0.7），透明）；
z指数：999；
溢出：隐藏；
/*过渡：背景。2放松*/
}
.标题ul{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
.标题ul a{
显示：块；
填充：15px；
文本对齐：居中；
颜色：rgb（224224224224）；
字体大小：1.7rem；
}
.标题：悬停{
颜色：#fff；
}
.标题.徽标{
浮动：左；
显示：块；
填充顶部：15px；
左侧填充：30px；
}
.header.logo img{
宽度：50px；
过渡：宽度。5s轻松；
}
.标题.菜单{
明确：两者皆有；
浮动：对；
最大高度：0；
文本对齐：居中；
宽度：100%；
过渡：最大高度。2秒放松；
过渡：背景0.2秒放松；
}
.标题.菜单图标{
填充：28px 20px；
位置：相对位置；
浮动：对；
光标：指针；
/*菜单图标作为嵌套在其中的span nav图标的父元素。因此，span是子元素*/
}
.标题.菜单图标.导航图标{
/*创建导航图标的中间栏*/
背景：#fff；
显示：块；
高度：2倍；
宽度：18px；
位置：相对位置；
过渡：背景。2放松；
}
.标题.菜单图标.导航图标：之后，
.标题.菜单图标.导航图标：之前{
背景：#fff；
内容：“；
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
过渡：所有。2放松；
}
.标题.菜单图标.导航图标：之前{
顶部：5px；
}
.标题.菜单图标.导航图标：后{
顶部：-5px；
}
.标题.菜单btn{
显示：无；
}
.header.menu btn:选中~.menu{
/*~选择下一个兄弟*/
最大高度：100vh；
背景：#000；
z指数：99；
过渡：背景0.2秒放松；
/*由于选中菜单btn后，.菜单上的最大高度设置为0，因此for属性必须与输入复选框的id匹配。因此，当您单击标签时，它将指向复选框，该复选框设置为“无”*/
}
/*用于关闭的X*/
.header.menu btn:选中~.menu图标.nav图标{
背景：透明；
}
/*中间线消失了*/
.标题.菜单btn:选中~.菜单图标.导航图标：之前{
变换：旋转（-45度）；
排名：0；
}
.标题.菜单btn:选中~.菜单图标.导航图标：之后{
变换：旋转（45度）；
排名：0；
}

使用Javascript:
1.获取复选框以便以后使用。
2.获取菜单中的所有链接。
3.为每个链接添加一个事件侦听器，以便在单击时取消选中复选框，因为知道只有选中复选框时才显示菜单

//加载所有内容后运行
window.onload=函数（）{
//获取复选框
设chk=document.getElementById（'menu-btn'）；
//获取所有菜单链接
让menuLinks=document.querySelectorAll（'.menu-li-a'）；
//链接上的循环
menuLinks.forEach（功能（项）{
//将事件侦听器添加到每个链接
item.addEventListener（'单击'，函数（））{
//单击链接时，取消选中复选框以隐藏菜单
chk.checked=假；
});
});
}

/*导航*/
.标题{
宽度：100%；
位置：固定；
排名：0；
背景：线性梯度（rgba（0,0,0,0.7），透明）；
z指数：999；
溢出：隐藏；
/*过渡：背景。2放松*/
}
.标题ul{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
.标题ul a{
显示：块；
填充：15px；
文本对齐：居中；
颜色：rgb（224224224224）；
字体大小：1.7rem；
}
.标题：悬停{
颜色：#fff；
}
.标题.徽标{
浮动：左；
显示：块；
填充顶部：15px；
左侧填充：30px；
}
.header.logo img{
宽度：50px；
过渡：宽度。5s轻松；
}
.标题.菜单{
明确：两者皆有；
浮动：对；
最大高度：0；
文本对齐：居中；
宽度：100%；
过渡：最大高度。2秒放松；
过渡：背景0.2秒放松；
}
.标题.菜单图标{
填充：28px 20px；
位置：相对位置；
浮动：对；
光标：指针；
/*菜单图标作为嵌套在其中的span nav图标的父元素。因此，span是子元素*/
}
.标题.菜单图标.导航图标{
/*创建导航图标的中间栏*/
背景：#fff；
显示：块；
高度：2倍；
宽度：18px；
位置：相对位置；
过渡：背景。2放松；
}
.标题.菜单图标.导航图标：之后，
.标题.菜单图标.导航图标：之前{
背景：#fff；
内容：“；
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
过渡：所有。2放松；
}
.标题.菜单图标.导航图标：之前{
顶部：5px；
}
.标题.菜单图标.导航图标：后{
顶部：-5px；
}
.标题.菜单btn{
显示：无；
}
.header.menu btn:选中~.menu{
/*~选择下一个兄弟*/
最大高度：100vh；
背景：#000；
z指数：99；
过渡：背景0.2秒放松；
/*由于选中菜单btn后，.菜单上的最大高度设置为0，因此for属性必须匹配