jQuery .toggle() 显示和隐藏子菜单

jQuery .toggle() to show and hide a sub-menu

提问by saltcod

I'm trying to use show/hide on a submenu. It looks like this:

我正在尝试在子菜单上使用显示/隐藏。它看起来像这样：

1. Parent 1
2. Parent 2
   1. Child A
   2. Child B
3. Parent 3
   1. Child C
   2. Child D

1. 家长 1
2. 家长 2
   1. 孩子A
   2. 儿童乙
3. 家长 3
   1. 儿童 C
   2. 儿童 D

I only want to show the submenu when I click on its parent. Currently, whenever I click on any parent, I get all of the submenus.

我只想在单击其父菜单时显示子菜单。目前，每当我单击任何父级时，我都会获得所有子菜单。

Like so: http://jsfiddle.net/saltcod/z7Zgw/

像这样：http: //jsfiddle.net/saltcod/z7Zgw/

Also, clicking on a link in the submenu toggles the menu back up.

此外，单击子菜单中的链接会切换菜单备份。

回答by Jasper

//select all the `<li>` element that are children of the `.parent` element
$('.parent').children().click(function(){

    //now find the `.child` elements that are direct children of the clicked `<li>` and toggle it into or out-of-view
    $(this).children('.child').slideToggle('slow');     
});

Demo: http://jsfiddle.net/jasper/z7Zgw/1/

演示：http: //jsfiddle.net/jasper/z7Zgw/1/

Basically the code above uses thisto reference the clicked <li>element so we can find the .childelement that is a child of the clicked <li>element.

基本上，上面的代码this用于引用被点击的<li>元素，因此我们可以找到作为.child被点击<li>元素的子元素的元素。

This: $('.child')

这个： $('.child')

Changed to: $(this).children('.child')

变成： $(this).children('.child')

Update

更新

Also you can stop the propagation of the clickevent on the nested .childelements like this:

您也可以停止click事件在嵌套.child元素上的传播，如下所示：

$('.parent').children().click(function(){
    $(this).children('.child').slideToggle('slow');

//select all the `.child` elements and stop the propagation of click events on the elements
}).children('.child').click(function (event) {
    event.stopPropagation();
});

Demo: http://jsfiddle.net/jasper/z7Zgw/9/

演示：http: //jsfiddle.net/jasper/z7Zgw/9/

Docs:

文档：

• event.stopPropagation(): http://api.jquery.com/event.stopPropagation
• .children(): http://api.jquery.com/children

• event.stopPropagation()：http: //api.jquery.com/event.stopPropagation
• .children()：http: //api.jquery.com/children

回答by ori

Your code was:

你的代码是：

$('.parent li').click(function(){
    event.preventDefault();
    $('.child').slideToggle('slow');
});

$('.child')selects all the "children". Change it to $('.child', this), to select only the ones inside the current element.

$('.child')选择所有“孩子”。将其更改为$('.child', this), 以仅选择当前元素内的那些。

The clickevent bubbles, so in order to ensure that only clicking the parent itself toggles the state, you can compare the event.targetwith this.

该click事件气泡，所以为了确保只有点击本身切换状态父，你可以比较event.target使用this。

However, this is quicker:

但是，这更快：

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).parent().find('.child').slideToggle('slow');
});

See fiddle

见小提琴

EDITas @Jasper pointed out, this is shorter/quicker:

正如@Jasper 指出的那样编辑，这更短/更快：

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).siblings('.child').slideToggle('slow');
});