jQuery如何使slideToggle應用每個項目

Question

如何使此開關淡入淡出適用於每個items塊？當我點擊任何人時，它適用於所有人。 有人可以幫忙嗎？由於

Online Sample

 <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的

$('.invisible').hide(); 
$('.warp').addClass('bg'); 

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

       $('span.click').css('visibility', 'visible'); 
       $('.warp').addClass('bg'); 
      } 
     }); 

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

Answer 1

我怎樣才能讓這個切換淡入淡出適用於每個itemsblock？ 當我點擊任何人，它適用於所有人。

這是因爲您使用的是$(".invisible")，它會選擇類別爲invisible的所有元素。您必須找到與您的切換元素（您的.warp元素）相關的元素，在您的情況下，它將如下所示：$warp.next(".invisible")。

查看已更新的FIDDLE。

更新您的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');  
}); 

Answer 2

位置：jsfiddle

的jQuery：

$('.invisible').hide(); 
$(".warp").click(function() { 
     $(this).next('div').slideToggle("slow", function() { 
      $(this).prev('div').toggleClass('bg'); 
      $(this).prev('div').find('.click').slideToggle("fast", function() {}); 
     }); 
});