Question

说我有<dl>隐藏了所有<dd>个。点击<dt>，使用以下代码切换其后的<dd>：

$(this).nextUntil('dt').toggle();

http://jsfiddle.net/mblase75/FZQj7/

现在，我想自动隐藏其他<dd>之后的<dt>，所以我尝试用这段代码抓住兄弟姐妹：

$(this).nextUntil('dt').toggle()
    .siblings().filter('dd').hide();

http://jsfiddle.net/mblase75/FZQj7/1/

但没有任何反应，因为我已经选择了<dd>的每个.nextUntil都是彼此的兄弟姐妹。结果，它们都被隐藏起来，没有任何东西被展示出来。

必须有一种简洁的方法告诉jQuery选择所有兄弟姐妹，除了我已经选择的那些，但我看不到它。想法？

Answer 1

这个怎么样？请注意使用not函数which you can read about here。

http://jsfiddle.net/lbstr/FZQj7/6/

$('dt').on('click',function() {
    var $this = $(this),
        $firstGroup = $this.nextUntil('dt');
    $firstGroup.toggle();
    $this.siblings('dd').not($firstGroup).hide();
});

Answer 2

~~你可以从父母那里做到：~~

$('dt').on('click',function() {
    $(this).nextUntil('dt').toggle().siblings("dt").not(this).nextUntil('dt').hide();
});

http://jsfiddle.net/FZQj7/7/

Answer 3

一个简单的解决方案是将类应用于您显示的元素。在每次单击时，您可以在显示所需的集合之前使用此类隐藏元素。

http://jsfiddle.net/FZQj7/11/

$('dt').on('click',function() {
    $('.visibledd').hide().removeClass('visibledd');
    $(this)
        .nextUntil('dt')
        .toggle()
        .addClass('visibledd');
});

Answer 4

这里有一些比这些更简单的东西：

$('dt').on('click',function() {
    $(this).siblings('dd').hide();
    $(this).nextUntil('dt').show();
});

如何选择多个元素的兄弟姐妹（）？

4 个答案: