javascript - 单击链接关闭菜单

Question

我想在单击链接时关闭菜单。您知道为什么我的代码不起作用吗？ 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>

Answer 1

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>