jQuery .toggle() pour afficher et masquer un sous-sous-menu

Je suis à l'aide de cette question de code pour faire un afficher/masquer la bascule

jQuery .toggle() pour afficher et masquer un sous-menu

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral > li > a').click(function() {
    event.preventDefault();
    $(this).siblings('.sub-menu').slideToggle('slow');
});

Le problème est que mon sous-menu a son propre sous-menu avec de nombreux articles. Est-il possible d'adapter ce code fonctionne ÉGALEMENT dans le prochain niveau?

Important: wordpress par défaut, l'enfant UL avec la même classe, donc les deux sont .sous-menu.

Comme:

<ul id="menu-lateral" class="menu">
    <li id="menu-item-29"><a href="#">Parent Level 1</a>
        <ul class="sub-menu">
            <li id="menu-item-108"><a href="#">Parent Level 2</a>
                <ul class="sub-menu">
                    <li id="menu-item-104"><a href="#">Element</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Violon: http://jsfiddle.net/qfygM/1/

Merci pour l'aide!

Mise à JOUR: La solution peut être trouvée ici >> http://jsfiddle.net/qfygM/7/

Fabriqué par Zenith.

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral li a').click(function(event){
if ($(this).next('ul.sub-menu').children().length !== 0) {     
    event.preventDefault();
}
$(this).siblings('.sub-menu').slideToggle('slow');});

OriginalL'auteur tibelchior | 2013-07-09

  1. 2

    Oui, dans ce cas, vous pouvez simplement utiliser le sélecteur de descendant - $('#menu-lateral li a') que votre sélecteur en opposition direct avec le sélecteur d'enfant que vous utilisez actuellement - $('#menu-lateral > li > a').

    jsFiddle ici.

    Comme vous êtes maintenant en utilisant le sélecteur de descendant, tous les futurs décroissant 'niveaux' seront ciblés individuellement dans votre $(this).siblings('.sub-menu').slideToggle('slow'); déclaration, ce qui rend très facilement extensible.

    Wow, incroyable!! Merci pour la réponse!
    Maintenant, le problème est que la sous-sous-menus sont unclickable. J'ai fait des recherches et le problème est avec l'événement.preventDefault(); Est-il un moyen de l'activer juste les boutons qui N'ont PAS d'enfants? Je peux ajouter des classes différentes pour les parents et les enfants si nécessaire. Merci pour l'attention.
    href="http://jsfiddle.net/qfygM/6/" >jsfiddle.net/qfygM/6
    travaillé! Je vais modifier la question pour ajouter votre solution afin que d'autres puissent le trouver. Merci
    href="http://jsfiddle.net/qfygM/7/" >jsfiddle.net/qfygM/7. l'événement n'est pas un objet global dans FF/IE (j'ai oublié que pour un moment) 😀

    OriginalL'auteur lifetimes