使用 jquery 切换兄弟姐妹

Posted 2023-03-24

【中文标题】使用 jquery 切换兄弟姐妹

【英文标题】：Toggle siblings with jquery

【发布时间】：2013-04-19 06:59:48

【问题描述】：

我在 jquery 中遇到了 toggle() 的问题。见http://jsfiddle.net/rch7L/。单击 1 级标题时，它会执行应有的操作，但单击 2 级标题时，它会打开所有 3 级行，而不仅仅是 2 级标题下的 3 级行。

$('tr.level-2, tr.level-3').css("display", "none");

$("tr.level-1").click(function()
    $(this).siblings('tr.level-2').toggle();
);

$("tr.level-2").click(function()
    $(this).siblings('tr.level-3').toggle();
);

我尝试过使用siblings()，但在单击2 级标题时它不是我想要的。

【参考方案1】：

只需使用.nextUntil() 方法

LIVE DEMO

$("tr.level-2").click(function()
    $(this).nextUntil('tr.level-2').toggle();
);

【讨论】：

喜欢这些不常见的关于函数的小jQuery。

@ChrisDixon 是的，不错的小方法 :)

可爱。如果我打开第 3 级行并单击第 1 级，则只有第 2 级标题会折叠，第 3 级仍然可见。我猜siblings().toggle() 在其他函数中也是错误的做法？