2010-03-03 5 views
0

J'essaie de créer un accordéon multiniveau en utilisant une liste non ordonnée imbriquée.Accordéon multiniveaux Jquery utilisant UL

Ce que je suis en train d'accomplir:

  • Afficher uniquement les ul "actif" (autre restent cachés)

  • Quand il y a un ul imbriqué - bascule seulement ul imbriquée (2222 -> 2,1)

code complet ici: http://pastie.org/852421

JS

$(document).ready(function() { 

    $('ul.menu li ul').hide(); 

    $('ul.menu li a').click(function(e){ 

     $('ul.menu li a').each(function(i){ 
      if($(this).next().is("ul") && $(this).next().is(":visible")){ 
       $(this).next().slideUp("fast"); 
      } 
     }); 

     var e = $(e.target);     

     if(e.next().is("ul") && e.next().is(":visible")){ 
      e.next().slideUp("fast"); 
      } else { 
      e.next().slideDown("fast"); 
     } 
    }); 

}); 

HTML

<ul class="menu"> 
    <li><a href="#">11111</a> 
     <ul> 
      <li><a href="#" id="one">1.1</a></li> 
      <li><a href="#" id="one">1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">22222</a> 
     <ul> 
      <li><a href="#">2.1+ (problem)</a> 
       <ul> 
        <li><a href="#">2.1.1</a></li> 
        <li><a href="#">2.2.2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">2.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">33333</a> 
     <ul> 
      <li><a href="#">3.1</a></li> 
      <li><a href="#">3.2</a></li> 
     </ul> 
    </li> 
</ul> 

Répondre

1

juste ajouter la classe .active à l'état actif li puis appelez avec jQuery:

$("ul:has(li.active)").slideDown(); 

simple,]

Edit:
aussi, je l'ai déjà utilisé suivant:

$(rootparent+' ul').hide(); 
$(rootparent+' ul:has(li#active)').show(); 
$(rootparent+">li:has(a[href*='"+activepage+"'])>ul").show(); 

(rootparent est supérieure ul, activepage est URI actif)

+0

Cela ne résout aucun de mes problèmes. – Eeyore

+0

ah, petite erreur. –

+0

et ne soyez pas si rapide avec -1 –