jQuery的如何使的slideToggle適用各一個項目，當一個人選擇

Question

我已經在這裏問一個問題隱藏其他： jQuery how to make slideToggle applies 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');  
    }); 

我的問題是，當一個人選擇怎樣的slideToggle其他invisible的div

感謝

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/