gpt4 book ai didi

javascript - 如何定位包含JQuery中所有子元素的div id

转载 作者:可可西里 更新时间:2023-11-01 12:50:47 24 4
gpt4 key购买 nike

我想单击一个特定的 div 并显示一个包含子元素的 div,然后在该 div 及其子元素之外单击时,div 及其子元素将再次设置为“display: none”。以下代码在单击显示的 div 的子元素时不起作用,从而导致隐藏父 div。如何在以下代码中将所有子 div 包含在 event.target.id == 'menu-container' 中?

<body>
<div id = "screen">
<div id = "menu-container">
<li class = "menu-options">
<ul>option-1</ul>
<ul>option-2</ul>
<ul>option-3</ul>
</li>
</div>
<div id = "bottom-panel">
<div id = "menu-button">
CLICK HERE FOR MENU
</div>
</div>
</div>
<body>

JQuery

$(document).ready(function() {
$('body').click(function(event){
if ( event.target.id == 'menu-button'){
$("#menu-container").show();
}else if(event.target.id == 'menu-container'){

return true;
}else{
$('#menu-container').hide();
}
});
});

http://jsfiddle.net/ecABg/

最佳答案

这是 fiddle .

$(document).ready(function() {
$('body').click(function(event){
if ( event.target.id == 'menu-button'){
$("#menu-container").show();
}
else if (event.target.id == 'menu-container' ||
$(event.target).parents('#menu-container').length > 0)
{
return true;
} else {
$('#menu-container').hide();
}
});
});

您还应该更正您的列表,它应该是:

<ul class="menu-options">
<li>option-1</li>
<li>option-2</li>
<li>option-3</li>
</ul>

关于javascript - 如何定位包含JQuery中所有子元素的div id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14844851/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com