JavaScript或CSS函数，当单击任何选项时关闭菜单

当我点击或选择一个项目时，我不知道如何关闭菜单。muenu只是CSS，但是我添加JavaScript代码没有问题，尽管我更愿意将其保留为CSS

这是一个JavaScript解决方案。所有代码都被注释

var elementsArray=document.queryselectoral（'.nav link'）；/*创建“.nav链接”li的数组*/
elementsArray.forEach（函数（myBtn）{
/*将侦听器添加到此数组的每个元素*/
myBtn.addEventListener（“单击”，函数（e）{
e、 preventDefault（）/*防止默认链接行为*/
document.getElementById（“navi toggle”）.checked=false；/*未选中复选框*/
});
});
.nav检查{
显示：无；
}
.nav btn{
背景色：#fff；
身高：4rem；
宽度：4rem；
位置：绝对位置；
顶部：2rem；
左：2rem；
边界半径：50%；
z指数：2000；
盒影：0 1rem 3rem rgba（0,0,0,0.1）；
文本对齐：居中；
光标：指针；
}
.导航背景{
高度：3.8雷姆；
宽度：3.8雷姆；
边界半径：50%；
位置：绝对位置；
顶部：2rem；
左：2rem；
背景图像：线性梯度（rgb（224224224224），rgba（2362362360.9））；
z指数：1000；
变换：变换0.8s三次贝塞尔（0.86,0,0.07,1）；
}
.导航导航{
高度：100vh；
字体系列：Northshire字体，无衬线；
位置：固定；
排名：0；
左：0；
z指数：1500；
不透明度：0；
宽度：0；
过渡：所有0.8s三次贝塞尔（0.68，-0.55,0.265,1.55）；
}
.导航列表{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
列表样式：无；
文本对齐：居中；
宽度：100%；
}
.导航项目{
保证金：1rem；
}
.nav链接：链接，.nav链接：已访问{
显示：内联块；
字体大小：7rem；
填充：1rem1rem；
颜色：rgb（0,0,0）；
文字装饰：无；
过渡：全部。4s；
}
.nav链路：链路跨度.nav链路：访问跨度{
保证金权利：1.5雷姆；
显示：内联块；
}
.nav链接：悬停，.nav链接：活动{
背景位置：100%；
颜色：#55c57a；
转化：translateX（1rem）；
}
.nav检查：已检查~.nav bg{
变换：标度（80）；
溢出：隐藏；
}
.nav检查：已检查~.nav导航{
不透明度：1；
宽度：100%；
}
.nav检查：：在~.nav bg之后{
变换：比例（0）；
}
.导航图标{
位置：相对位置；
最高保证金：1.9雷姆；
}
.nav图标、.nav图标：：之前、.nav图标：：之后{
宽度：2em；
高度：5px；
背景色：#333；
显示：内联块；
}
.nav图标：：之前，.nav图标：：之后{
内容：“；
位置：绝对位置；
左：0；
过渡：all.2s；
}
.nav图标：：之前{
顶部：-.8rem；
}
.nav图标：：之后{
顶部：.8rem；
}
.nav btn:悬停.nav图标：：之前{
顶部：-1rem；
}
.nav btn:hover.nav图标：：之后{
顶部：1rem；
}
.nav检查：选中+.nav btn.nav图标{
背景色：透明；
}
.nav检查：选中+.nav btn.nav图标：：之前{
变换：旋转（135度）；
排名：0；
}
.nav检查：选中+.nav btn.nav图标：：之后{
排名：0；
变换：旋转（-135度）；
}







如何打开它？你的CSS不见了，为了让它工作，你使用的是框架还是什么？共享您的javascript代码。不，这是一个仅用于css的菜单，使用
input:checked~.nav mav{display:block；}
或其他内容。我在CodePent中添加了指向整个代码的链接，还有其他内容。如果您将鼠标悬停在页面的左侧，则即使链接处于隐藏状态，也可以单击链接。我怎样才能解决这个问题？我的意思是，禁用或隐藏它们。为此，您可以使用
指针事件：无
或
可见性：隐藏打开
.nav导航
和
指针事件：自动
或
可见性：可见打开
。导航检查：已检查~。导航导航