单击链接上的关闭菜单
我想单击链接时关闭菜单。你知道我的代码为什么不起作用吗? 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>
你有两个愚蠢的错误。首先,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>
不需要执行两次'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";
}
});
不需要做两次'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();
});
});
中单击元素的.nodeName
是A
其中H3
一个孩子,其中LI
孩子,所以你可以这样搭配吧:
e.target.parentNode.parentNode.nodeName == "LI"
可以如果你想
01也添加额外的检查e.target.parentNode.nodeName == "H3"
e.target.nodeName == "A"
你想,如果它被点击隐藏'li'元素? –
尝试'e.stopPropagation();' – Fr33d0m
@ Fr33d0m问题是条件没有得到满足。 –