单击链接上的关闭菜单

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

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

 document.getElementById("menu").addEventListener("click",function(e) { 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> 

Answer 2

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> 

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"