Problème étrange avec jQuery bascule ..?

Question

J'ai un menu/UL avec un groupe de LI, et à l'intérieur les LI, j'ai un peu plus UL, LI ... Jetez un oeil:

<ul class='parent'> 
    <li><a>Boules</a></li> 
    <li> 
    <a>Livres</a> 
    <ul class='child'>  
     <li><a>Magazines</a></li> 
     <li><a>Revues</a></li> 
     <li><a>Romans</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Wirelace (3 childs)</a>  
    <ul class='child'> 
     <li><a>Bleu</a></li> 
     <li> 
     <a>Rouge</a> 
     <ul class='subchild'> 
      <li><a>4mm</a></li> 
      <li><a>6mm</a></li>  
     </ul> 
     </li> 
     <li> 
     <a>Vert</a> 
     <ul class='subchild'> 
      <li><a>2mm</a></li> 
      <li><a>4mm</a></li>  
      <li><a>6mm</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

Tous UL .child et .subchild sont caché avec CSS display:none; donc ce que vous voyez lorsque vous chargez la page est juste les 3 LIs de la classe PARENT (Boules, Livres, Wirelace).

J'ai ce code jQuery (fonctionne comme prévu) pour basculer l'affichage de l'UL .child, lorsque vous cliquez dessus le LI apparaissent, mais le subchild UL rester caché, comme prévu:

$("ul.parent li a").click(function() { 
    $(this).next().toggle(); 
    return false; 
}); 

I aussi celui-ci pour UL .subchild, mais il ne fonctionne pas, même si elle est identique:

$("ul.child li a").click(function() { 
    $(this).next().toggle(); 
    return false; 
}); 

il fonctionne comme prévu si je fais:

$(this).next().toggle().toggle(); 

Si j'utilise juste 1 toggle, il joue avec l'affichage (je le vois dans Firebug), mais s'il est caché (par le CSS original), il ajoute display: none. Si je supprime le CSS (le rendant visible au chargement de la page), il ajoute display: block.

La seule façon dont il agit comme prévu, est si je le force avec show() ou hide(). Mais alors je n'ai pas de fonction bascule.

Même un if($(this).is("visible")) ne fonctionnera pas ...

qui est dans Firefox, Chrome, Safari, IE8.

Je suis désolé pour le long post, quelqu'un a une idée de ce qui pourrait causer que ... ???

Answer 1

Le problème est que le sélecteur

ul.parent li a 

en fait est assez générale pour sélectionner également ul.child li a, de sorte que les éléments sous .child ont fait les deux gestionnaires qui leur sont rattachés. Si vous voulez simplement rendre les sélecteurs un peu plus précis, vous pouvez éviter ce problème.

ul.child > li > a, ul.parent > li > a 

Essayez également d'utiliser le sélecteur d'enfant, ul > li > ul au lieu de leur donner des cours pour indiquer que ce sont des enfants.