Question

我正在尝试在子菜单上使用show / hide。它看起来像这样：

家长1
家长2
1. 儿童A
2. Child B
家长3
1. Child C
2. 儿童D

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

此外，单击子菜单中的链接可以切换菜单。

Answer 1

//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');     
});

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

上面的代码基本上使用this来引用点击的<li>元素，这样我们就可以找到.child元素，该元素是所点击的<li>元素的子元素。

这：$('.child')

已更改为：$(this).children('.child')

更新

此外，您可以停止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();
});

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

文档：

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

Answer 2

您的代码是：

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

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

click个事件会冒泡，因此为了确保只点击父级本身切换状态，您可以将event.target与this进行比较。

然而，这更快：

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

请参阅fiddle

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

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

jQuery .toggle（）显示和隐藏子菜单

2 个答案:

更新