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

我正在尝试在子菜单上使用“显示/隐藏”。看起来是这样的：

父1

家长2

孩子A

孩子B

家长3

儿童C

儿童D

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

像这样：

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

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

演示：

文件：

• event.stopPropagation（）

  ：

• .children（）

  ：

演示：

文件：

• event.stopPropagation（）

  ：

• .children（）

  ：

您的代码是：

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

$（'.child'）

选择所有“子项”。将其更改为

$（'.child'，this）

，以仅选择当前元素中的元素

单击

事件会出现气泡，因此为了确保仅单击父级本身即可切换状态，您可以将

事件.target

与

此

进行比较

但是，这会更快：

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

看

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

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

您的代码是：

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

$（'.child'）

选择所有“子项”。将其更改为

$（'.child'，this）

，以仅选择当前元素中的元素

单击

事件会出现气泡，因此为了确保仅单击父级本身即可切换状态，您可以将

事件.target

与

此

进行比较

但是，这会更快：

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

看

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

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

---

.parent（）.find（'.child'）

也可以是

。兄弟姐妹（'.child'）

，或者更快的选择器应该是

。next（）

，因为

.child

元素似乎直接位于

a

元素之后。当然，您是对的。我更改了两次脚本（OP询问的每个问题一次），但没有更改。非常感谢大家。我采用了.sibbines（）方法。简明扼要。另外，我认为下次我记住stopPropagation（）的几率很小。非常感谢。

.parent（）。我更改了两次脚本（OP询问的每个问题一次），但没有更改。非常感谢大家。我采用了.sibbines（）方法。简明扼要。另外，我认为下次我记住stopPropagation（）的几率很小。非常感谢。最好的答案。非常感谢。❤️最佳答案。非常感谢。❤️