爲同一頁面上的多個元素添加滑動效果

Question

我試圖在同一頁面上爲多個div添加滑動效果，但一次只有一個，這裏是我的代碼：

 
$(function(){ 
    $(".child").hide(); 
    $(".parent").hover(
     function(){ $(".child").slideDown('slow'); }, 
     function(){ $(".child").slideUp('slow'); } 
    ); 

});

和HTML

<div class="parent"> 
    <strong>This would display some content that I can click on</strong> 
</div> 
<div class="child"> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
</div>

<div class="parent"> 
    <strong>This would display some content that I can click on</strong> 
</div> 
<div class="child"> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
    This expands across the whole window and is fixed to the bottom<br/> 
</div>

問題是，我想只有一個div來同時滑動不是所有

Answer 1

你可以試試：jQuery UI - Accordion

Answer 2

你可以這樣做：

 
$(".parent").hover(
     function(){ $(this).next(".child").slideDown('slow'); }, 
     function(){ $(this).next(".child").slideUp('slow'); } 
    ); 
 

Answer 3

你可以使用:first和:last選擇一次一個，並打開它。

謝謝..