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

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应该是唯一的。在这种情况下，您应该使用类（我menu-item为元素选择器添加了类）

我尝试通过一些评论更改您的代码

//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>