javascript - 单击链接上的关闭菜单

我想在单击链接时关闭菜单。您是否知道为什么我的代码不起作用？ jsbin

document.getElementById("menu").addEventListener("click",function(e) {
  if(e.target && e.target.nodeName == "LI") {
    console.log("ok");
    menu.style.display = "none";
  }
});

<ul  class="nav__right" id="menu">
  <li>
    <h3><a href="#home">home</a></h3>
  </li>
  <li>
    <h3><a href="#about">À propos</a></h3>
  </li>
  <li>
    <h3><a href="#production">Réalisations</a></h3>
  </li>
  <li>
    <h3><a href="#contact">Contact</a></h3>
  </li>
</ul>

最佳答案

e.target.nodeName返回A，而您将其与LI进行比较。

document.getElementById("menu").addEventListener("click",function(e) {
  console.log(e.target.nodeName);
  if(e.target && e.target.nodeName == "A") {
    console.log("ok");
    this.style.display = "none";
  }
});

<ul  class="nav__right" id="menu">
  <li>
    <h3><a href="#home">home</a></h3>
  </li>
  <li>
    <h3><a href="#about">À propos</a></h3>
  </li>
  <li>
    <h3><a href="#production">Réalisations</a></h3>
  </li>
  <li>
    <h3><a href="#contact">Contact</a></h3>
  </li>
</ul>