Comment créer un menu d'accordéon jquery à plusieurs niveaux en utilisant jQuery?

Question

Je veux créer de l'accordéon multi-niveaux Navigation en utilisant jQuery, j'ai essayé d'utiliser ce script mais il ne permet pas le multi-niveau. S'il vous plaît voir l'image exactement ce que je cherche,

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

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

Merci

Answer 1

balisage d'abord vos articles comme si. Vous voulez marquer n'importe quel sous-menu avec la classe "accordéon".

<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> 

Ensuite, utilisez le plugin accordéon jQuery UI (Ne pas oublier d'inclure le fichier de base jQuery et le fichier jQuery UI.

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

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

Utilisez le style CSS pour au besoin. Bien sûr, les structures et les noms de classes peuvent être modifiés de préférence, ce qui est la solution la plus simple.