点击链接

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

你有两个愚蠢的错误。首先，$value['attributes']['stats]['skillTier']是一个未定义的变量。你显然意味着menu。最后，document.getElementById('menu')方法将返回“A”，而不是“LI”。这是更正后的代码：

nodeName

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

Answer 2

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

＆＃13;

＆＃13;

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";
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你看一下html

 <li>
      <h3><a href="#home">home</a></h3>
 </li>

你的情况确实是错误的。您只需检查LI。点击甚至可以是任何内容的链接（A）或整行（H3）。

document.getElementById("menu").addEventListener("click",function(e) {

if((e.target) && (e.target.nodeName == "LI" || e.target.nodeName == "H3" ||e.target.nodeName == "A")){
    console.log("ok");
    this.style.display = "none";
}
});

DEMO

Answer 4

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

$(function () {
    var sf_menu_sub = $('.nav__right');
    $('.nav__right').on('click', function (e) {
        e.stopPropagation();
        sf_menu_sub.hide();
    });
    $(document).on('click', function (e) {
        sf_menu_sub.hide();
    });
});

Answer 5

点击元素的.nodeName为A H3的孩子LI的孩子，所以你可以这样匹配它：

e.target.parentNode.parentNode.nodeName == "LI"

如果您想

，还可以添加额外的支票

• e.target.parentNode.nodeName == "H3"
• e.target.nodeName == "A"