单击链接上的关闭菜单

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

来源

2017-02-25 DenisMasot

你想，如果它被点击隐藏'li'元素？ –

尝试'e.stopPropagation（）;' – Fr33d0m

@ Fr33d0m问题是条件没有得到满足。 –

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>

来源

2017-02-25 11:41:08 vatz88

你有两个愚蠢的错误。首先，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>

来源

2017-02-25 11:26:44

不需要执行两次'document.getElementById（“menu”）'。 'this.style.display ='none''会做。 – Fahmi

也行。编辑代码。谢谢。 –

如果你看一下HTML

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

你的条件是错误的actuallly。你只是检查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

来源

2017-02-25 11:27:12

不需要做两次'document.getElementById（“menu”）'。 'this.style.display ='none''会做。 – Fahmi

@Fahmi真。只需复制粘贴的OP代码。谢谢。更正， –

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

来源

2017-02-25 11:33:01

中单击元素的.nodeName是A其中H3一个孩子，其中LI孩子，所以你可以这样搭配吧：

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

可以如果你想

01也添加额外的检查

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

来源

2017-02-25 11:44:01

单击链接上的关闭菜单

回答

相关问题