用相同的類切換div，但不是一次全部切換？

Question

我有以下的HTML，因爲我使用Wordpress，我無法更改每個div的類。

<div class="show_hide">content1</div> 
<div class="extended">extension of content 1</div> 
<div class="show_hide">content2</div> 
<div class="extended">extension of content 2</div> 

我的jQuery腳本如下：

<script type="text/javascript"> 

    $(document).ready(function(){ 


     $(".sliding").hide(0); 
     $(".show_hide").show(0); 

    $('.show_hide').click(function(){ 
    $(".sliding").slideToggle(0); 
    }); 

}); 

</script> 

現在，在show_hide DIV點擊時，既DIV與類 「擴展」 節目。我只想顯示div點擊的擴展名。誰能幫我這個？

Answer 1

如果.extended元素是緊隨.show_hide元素的兄弟姐妹，你可以使用next：

$('.show_hide').click(function(){ 
    $(this).next().slideToggle(0); 
}); 

如果在兩者之間有其他的元素，你可以使用nextAll，然後減少選擇到第一匹配（與eq）：

$('.show_hide').click(function(){ 
    $(this).nextAll('.extended').eq(0).slideToggle(0); 
}); 

Answer 2

在回調函數，變量this將包含對DOM節點的引用引發了事件：

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