Javascript jQuery 切换 div 的子级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8649178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery toggle children of div
提问by Or Weinberger
I have the following HTML code:
我有以下 HTML 代码：
<div class="dim">
Menu
<div class='hidden'>submenu1</div>
<div class='hidden'>submenu2</div>
</div>
<div class="dim">
Menu2
<div class='hidden'>submenu3</div>
<div class='hidden'>submenu4</div>
</div>
class hiddenhas display:none
班级hidden有display:none
I'm trying to get the toggle to work when I click on the word menu or menu2
当我点击单词 menu 或 menu2 时，我试图让切换开关工作
回答by Naftali aka Neal
$('.dim').click(function(){
$('.hidden', this).toggle(); // p00f
});
Fiddle: http://jsfiddle.net/maniator/V4X4t/
小提琴：http: //jsfiddle.net/maniator/V4X4t/
Update
更新
Checks for dimelement being clicked:
检查dim被点击的元素：
$('.dim').click(function(event){
var isDim = $(event.target).is('.dim');
if(isDim){ //make sure I am a dim element
$('.hidden', this).toggle(); // p00f
}
});
回答by Jasper
$('.dim').on('click', function () {
//$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion
$(this).children('.hidden').toggle();
});
$('.hidden').on('click', function (event) {
event.stopPropagation();
});
Here is a demo: http://jsfiddle.net/76uTr/
这是一个演示：http: //jsfiddle.net/76uTr/
This shows/hides the .hiddenelements when clicking on a .dimelement but it also allows you to click on a .hiddenelement and not toggle it's visibility.
这会.hidden在单击一个元素时显示/隐藏元素，.dim但它也允许您单击一个.hidden元素而不是切换它的可见性。
Notice that I used .children()instead of .find()which will only select direct descendants of the root element (.dim).
请注意，我使用的.children()代替.find()which 只会选择根元素 ( .dim) 的直接后代。
Also note that .on()is new in jQuery 1.7 and in this case is the same as .bind().
另请注意，这.on()是 jQuery 1.7 中的新内容，在这种情况下与.bind().
UPDATE
更新
Using event.stopPropagation()we can allow ourselves to nest elements and not let events bubble-up and trigger multiple event handlers:
使用event.stopPropagation()我们可以允许自己嵌套元素，而不是让事件冒泡并触发多个事件处理程序：
$('.dim').on('click', function (event) {
event.stopPropagation();
$(this).children('.hidden').toggle();
});
$('.parent').on('click', function () {
$(this).children('.dim').toggle();
});
$('.hidden').on('click', function (event) {
event.stopPropagation();
});
Here is a demo: http://jsfiddle.net/76uTr/1/
这是一个演示：http: //jsfiddle.net/76uTr/1/
Here the .parentelement is assumed to be the direct parent of the .dimelements.
这里.parent假定元素是元素的直接父.dim元素。
回答by Joseph Silber
Simply attach a click event handler, and check if the current element is the one that was clicked:
只需附加一个点击事件处理程序，并检查当前元素是否是被点击的元素：
$('.dim').click(function(e)
{
if (e.target == this)
{
$(this).children().toggle();
}
});
Here's the fiddle: http://jsfiddle.net/V4X4t/6/
这是小提琴：http: //jsfiddle.net/V4X4t/6/
回答by abuduba
Create anchors at Menu and Menu2
在 Menu 和 Menu2 处创建锚点
<div class="dim">
<a href="#" >Menu</a>
<div class='hidden'>submenu1</div>
<div class='hidden'>submenu2</div>
</div>
<div class="dim">
<a href="#" >Menu2</a>
<div class='hidden'>submenu3</div>
<div class='hidden'>submenu4</div>
</div>
and script:
和脚本：
$(".dim > a").click( function ( e ){
e.preventDefault() // prevent default action - hash doesn't appear in url
$( this ).parent().find( "div" ).toggleClass( "hidden" );
});
When click anyone of link submenu belonging to it will will appear or disappear
当单击属于它的链接子菜单中的任何一个时，它会出现或消失
Live demo: http://jsfiddle.net/ZxwpJ/
现场演示：http: //jsfiddle.net/ZxwpJ/
