如何使用jQuery創建多級jQuery的手風琴菜單？

Question

我想用jQuery創建多級手風琴導航，我試過使用這個腳本但是不允許多級別。請查看究竟我要尋找的圖片，

http://www.i-marco.nl/weblog/jquery-accordion-menu/#

alt text http://img36.imageshack.us/img36/7897/multilevelaccordian.png

感謝

Answer 1

首先標記你的項目，像這樣。您需要用「手風琴」類標記任何子菜單。

<ul class="accordion"> 
    <li><a class="head" href="#">Item 1</a> 
     <ul class="accordion"> 
     <li><a href="#">Item 1 - 1 </a></li> 
     <li><a href="#">Item 1 - 2</a></li> 
     <li> 
     <a href="#">Item 1 - 3</a> 
     <ul class="accordion"> 
      <li><a href="#">Item 1 - 3 - 1</a></li> 
      <li><a href="#">Item 1 - 3 - 1 </a></li> 
      <li><a href="#">Item 1 - 3 - 1</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#">Item 2</a></li> 
    <li> 
    <a href="#">Item 3</a> 
    <ul class="accordion"> 
     <li><a href="#">Item 3 - 1 </a></li> 
     <li><a href="#">Item 3 - 2</a></li> 
     <li><a href="#">Item 3 - 2</a></li> 
    </ul> 
    </li> 
</ul> 

後，僅僅使用jQuery UI的手風琴插件（不要忘了包括了jQuery核心文件和jQuery UI文件。

<script type="text/javascript"> 
    $(function() { 
     $(".accordion").accordion(); 
    }); 
</script> 

http://jqueryui.com/demos/accordion/

使用CSS樣式的要求。當然，結構和類名可以根據需要進行更改。這只是最簡單的解決方案