顯示/隱藏使用jQuery

Question

兩個div我有兩個div的：

  <a href="#" class="component_expand"></a> 
     <div class="component_wrapper"> 

     </div> 

     <a href="#" class="component_expand"></a> 
     <div class="component_wrapper"> 

     </div> 

jQuery代碼：

<script type="text/javascript"> 

    $(document).ready(function(){ 

    $(".component_wrapper").hide(); 
    $(".component_expand").show(); 

    $('.component_expand').click(function(){ 
    $(".component_wrapper").slideToggle(); 
    }); 

    }); 

    </script> 

我想盡我點擊時間 「組件展開」 一個DIV開放。現在打開兩個 我會很高興與他們幫助我

Answer 1

您需要使您的選擇器具體，使用next。

$(this).next().slideToggle(); 

嘗試：

$(document).ready(function(){ 
    $(".component_wrapper").hide(); //You can do this using css rule itself 
    $(".component_expand").show().click(function(){ 
     $(this).next().slideToggle(); 
    }); 
    }); 

Demo

Answer 2

使用this實例和.next

$('.component_expand').click(function(){ 
    $(this).next(".component_wrapper").slideToggle(); 
});