Javascript 单击导航项时关闭导航

我的目标是在汉堡菜单中单击某个项目时关闭它。现在，菜单只使用html和css

这个导航栏和其他导航栏的区别在于，我的导航栏是从一个input checkbox html元素创建的，我需要的是在汉堡内部单击链接时取消选中我的复选框。这将关闭整个菜单，就像我点击汉堡一样。另外，您能解释一下javascript的功能和原因吗？我对javascript没有太多经验，谢谢。：）

我还使复选框可见，以便我们更好地了解正在发生的事情

我的CSS：

/*导航菜单*/
.导航{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：70像素；
线高：70px；
文本对齐：右对齐；
z指数：10000；
背景色：#ffffff；
边框底部：1px实心#eaeb；
}
.菜单{
利润率：0.30px 0.0；
}
/*链接项目*/
.菜单a{
清楚:对,；
线高：70px；
文字装饰：无；
利润率：0.10px；
文本对齐：居中；
颜色：#33334d；
背景色：#ffffff；
}
.菜单a：悬停{
背景色：#c2c2d6；
}
/*汉堡包特性*/
标签{
浮动：对；
显示：无；
宽度：26px；
线高：70px；
利润率：0.40px 0.0；
字体大小：36px；
}
/*复选框*/
#拨动{
}
@仅介质屏幕和（最大宽度：1075px）{
/*汉堡包特性*/
标签{
显示：块；
光标：指针；
}
/*导航菜单属性*/
.菜单{
宽度：100%；
显示：无；
文本对齐：居中；
}
/*链接项目*/
.菜单a{
显示：块；
边际：0px；
边框底部：1px实心#eaeb；
}
/*选中复选框时显示链接*/
#切换：选中+菜单{
显示：块；
}
}
我的HTML:

☰

根据您的需要，实际上可能不需要Javscript

如果您给包含导航链接的div一个ID，您可以使用

a

标记将href设置为ID，以此作为目标。然后您可以使用

：target

选择器更改导航div的可见性

/*导航菜单*/
.导航{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：70像素；
线高：70px；
文本对齐：右对齐；
z指数：10000；
背景色：#ffffff；
边框底部：1px实心#eaeb；
}
.菜单{
利润率：0.30px 0.0；
}
/*链接项目*/
.菜单a{
清楚:对,；
线高：70px；
文字装饰：无；
利润率：0.10px；
文本对齐：居中；
颜色：#33334d；
背景色：#ffffff；
}
.切换{
文字装饰：无；
颜色：#33334d；
}
.菜单a：悬停{
背景色：#c2c2d6；
}
/*汉堡包特性*/
.切换，
标签{
浮动：对；
显示：无；
宽度：26px；
线高：70px；
利润率：0.40px 0.0；
字体大小：36px；
}
/*复选框*/
#切换{}
@仅介质屏幕和（最大宽度：1075px）{
/*汉堡包特性*/
.切换，
标签{
显示：块；
光标：指针；
}
/*导航菜单属性*/
.菜单{
宽度：100%；
显示：无；
文本对齐：居中；
}
/*链接项目*/
.菜单a{
显示：块；
边际：0px；
边框底部：1px实心#eaeb；
}
/*选中复选框时显示链接*/
#菜单：目标，
#切换：选中+菜单{
显示：块；
}
}

---

根据您的需要，实际上可能不需要Javscript

如果您给包含导航链接的div一个ID，您可以使用

a

标记将href设置为ID，以此作为目标。然后您可以使用

：target

选择器更改导航div的可见性

/*导航菜单*/
.导航{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：70像素；
线高：70px；
文本对齐：右对齐；
z指数：10000；
背景色：#ffffff；
边框底部：1px实心#eaeb；
}
.菜单{
利润率：0.30px 0.0；
}
/*链接项目*/
.菜单a{
清楚:对,；
线高：70px；
文字装饰：无；
利润率：0.10px；
文本对齐：居中；
颜色：#33334d；
背景色：#ffffff；
}
.切换{
文字装饰：无；
颜色：#33334d；
}
.菜单a：悬停{
背景色：#c2c2d6；
}
/*汉堡包特性*/
.切换，
标签{
浮动：对；
显示：无；
宽度：26px；
线高：70px；
利润率：0.40px 0.0；
字体大小：36px；
}
/*复选框*/
#切换{}
@仅介质屏幕和（最大宽度：1075px）{
/*汉堡包特性*/
.切换，
标签{
显示：块；
光标：指针；
}
/*导航菜单属性*/
.菜单{
宽度：100%；
显示：无；
文本对齐：居中；
}
/*链接项目*/
.菜单a{
显示：块；
边际：0px；
边框底部：1px实心#eaeb；
}
/*选中复选框时显示链接*/
#菜单：目标，
#切换：选中+菜单{
显示：块；
}
}

---

哇，真有趣。这是一个相当奇怪的练习，你有什么，但它可以工作。您可以通过选中输入使菜单显示/隐藏。非常有趣。我从来没有想过那样的事

但是你也需要一段JS代码

通过CSS，您可以处理一些基本的选择器，如：hover、：focus、：active等。在我们的例子中，您还可以创建一些有趣的单击事件。但复选框并不是为了这个目的

点击和其他事件由JS处理（更多）

因此，在本例中，我们选择所有链接：

var links = document.querySelectorAll('.menu a');

然后我们必须向每个链接添加click事件，这将把我们的输入设置为

checked=“false”

=关闭菜单

此JS代码仅在呈现选定链接时有效，因此您需要在

之前将此代码放在html文件的末尾，或者使用

窗口。onload

var links=document.querySelectorAll（'.menu