如何隐藏菜单时单击任何菜单项?

Question

我找不到问题在哪里。你知道如何在点击菜单项时隐藏吗?

var button = document.getElementById("#1");
var menu = document.getElementById("#menu");
button.addEventListener('click', function(event) {
if (menu.style.display == "block") {
menu.style.display = "none";
} else {
menu.style.display == "block";
}
});

<ul id="menu">
<li><a href="#home" id="1" class="active">Home</a></li>
<li><a href="#model-s" id="1" class="one">Model S</a></li>
<li><a href="#model3" id="1">Model 3</a></li>
<li><a href="#modelx" id="1">Model X</a></li>
<li><a href="#modely" id="1">Model Y</a></li>
</ul>

Answer 1

不能用#得到document.getElementById("#1")。getElementById已经是一个id选择器，所以你不需要#。

menu.style.display，你没有menu的内联样式，你的条件第一次不会通过。

元素中也不能有多个id，因为id必须是唯一的。在这种情况下，您应该使用class(我为元素选择器添加了menu-itemclasses)

我试着用一些注释来改变你的代码

//get all menu items
var menuItems = document.querySelectorAll(".menu-item");
var menu = document.getElementById("menu");
for (const menuItem of menuItems) {
//add click events to menu items
menuItem.addEventListener('click', function(event) {
//hide menu if click on menu item
menu.style.display = "none";
});
}

<ul id="menu">
<li><a href="#home" class="active menu-item">Home</a></li>
<li><a href="#model-s" class="one menu-item">Model S</a></li>
<li><a href="#model3" class="menu-item">Model 3</a></li>
<li><a href="#modelx" class="menu-item">Model X</a></li>
<li><a href="#modely" class="menu-item">Model Y</a></li>
</ul>