如何使用jQuery製作簡單的手風琴？

Question

我有這個HTML結構，我需要點擊「.open_panel」名爲「.utenti_iscritti」的div變得可見並且向下滑動。顯然，我不能使用唯一的ID，因爲這是一個在頁面中多次複製的結構（這是一個列表）。

非常感謝！

這是我的代碼：

<script type="text/javascript"> 
     $(".open_panel").click(function() { 
       $(this).parent().parent().next("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow"); 
       //$(this).siblings().css({backgroundImage:"url(left.png)"}); 
     }); 
</script> 

<div class="lezione"> 
     <div class="intro"> 
     <h5>09:00 - 10:00</h5> 
     <h4>Walking</h4> 
     <h6>Sala Walking con Francesco</h6> 
     <div class="action libero"> 
     <span class="contatore">2</span> 
     <h6><a class="open_panel" href="#" title="Ci sono ancora posti liberi">Iscritti</a></h6> 
       </div><!--action--> 
     </div><!--intro--> 

     <div class="utenti_iscritti"> 
     </div><!--utenti_iscirtti--> 

</div><!--lezione--> 

Answer 1

看看在closest() - 函數的jQuery：

$(".open_panel").click(function() { 
$(this).closest("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow"); 
}); 

Answer 2

我會用accordian in jQuery UI

有演示的頁面這裏也是：http://jqueryui.com/demos/accordion/

Answer 3

a quick google顯示噸的手風琴控制。我會推薦使用我使用的jQuery UI accordion。有大量的演示和示例代碼，並且使用在線皮膚生成器可以很好且具有皮膚功能。