javascript - jQuery如何使slideToggle对每个项目应用一个并在选择一个时隐藏其他项目

Question

我在这里问了一个问题： jQuery how to make slideToggle apply one each item

我在这里得到了正确的答案：FIDDLE

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

jQuery：

$(".warp").click(function () {
    var $warp = $(this);

    $warp.next(".invisible").slideToggle("slow", function () {
        if ($(this).is(':visible')) {
            $warp.removeClass('bg');
        }else{            
            $warp.find('span.click').css('visibility', 'visible');  
            $warp.addClass('bg');
        }
    });

    $warp.find('span.click').css('visibility', 'hidden');      
  });

我的问题是，当一个选择一个方法invisible时

谢谢

Answer 1

只需选择:visible这样的可见元素：

var siblings = $warp.parent().siblings('.items').find('.invisible:visible')

siblings.slideToggle("slow", function () {
    var parent = $(this).prev('.warp');
    if ($(this).is(':visible')) {
        parent.removeClass('bg');
    }else{            
        parent.find('span.click').css('visibility', 'visible');  
        parent.addClass('bg');
    }
});

这是一个小提琴：http: //jsfiddle.net/az8T7/4/