arbre de menu jQuery, glisse vers le haut / bas

Question

J'essaie de créer un menu jQuery Dropdow, jusqu'à présent, cela fonctionne bien. Sauf que vous ne pouvez ouvrir que des dossiers / arbres, ne pas les fermer à nouveau. Je suppose que je dois utiliser l'équation ou les frères et sœurs dans jQuery? Mais je ne sais pas comment les assembler - quelqu'un pourrait-il montrer? :)

<ul class="nav">
    <li><a href="#">Test link</a></li>
    <ul class="nav">
        <li>Test under</li>
    </ul>
</ul>

jQuery(document).ready(function(){
    jQuery('.nav ul').css('display', 'none');

    jQuery('.nav li').click(function(){
        jQuery(this).find('ul:first').slideDown(); 
    })

})

//Simon

Answer 1

Il y a une erreur de syntaxe avec votre balisage - le seul descendant direct valide d'un <ul> l'élément est <li>. Si vous souhaitez nicher votre liste, faites-le dans le <li> lui-même:

<ul class="nav">
    <li>
        <a href="#">Test link</a>
        <ul class="nav">
            <li>Test under</li>
        </ul>
    </li>
</ul>

Pour faire basculer, nous demandons simplement de rechercher un frère <ul> élément et appliquez le .slideToggle() Méthode pour lui lorsque le lien est cliqué:

$(function() {
    // Hide submenus
    $(".nav ul").hide();

    // Toggle nested <ul> (siblings of the link)
    $(".nav > li > a").click(function(e) {
        $(this).siblings("ul").slideToggle();
        e.preventDefault();
    });
});

Voici un violon de démonstration: http://jsfiddle.net/teddyrisé/2y9fz/ (Ajout de plus d'éléments de liste pour démontrer l'effet)

Answer 2

Utilisation slideToggle(); à la place de slideDown();, cela le fera pour qu'il fonctionne à coudre ou à glisser en fonction de l'orientation actuelle.

Answer 3

Cela devrait aider

Chaque pièce est étiquetée, il est donc facile à comprendre. C'est beaucoup plus conscient et réfléchi que d'utiliser slideToggle. Au lieu de cela, il crée des situations où il doit glisser vers le haut ou vers le bas, et retourne les branches précédentes lorsqu'un autre est sélectionné.

$('.nav ul').each(function () {
    $(this).on('click', function(e) {
        e.stopPropagation();//ignore ul clicks
    }).parent().on('click', function () {//target only parents of a ul
        if($(this).hasClass('on')) {//if selected
            $(this).addClass('on').children('ul').slideUp();//slideup
        } else {//if not selected
            if($(this).parent('.nav')) {//if start of branch
                $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches
            }
            $(this).addClass('on').children('ul').slideDown();//slideDown
        }
    });
});

C'est récursif, et il ne cible que li qui ont un ul enfant. Lorsque vous sélectionnez une succursale différente, il reviendra également à la branche précédemment ouverte. J'ai supprimé le anchor Tags, parce que l'action devait être sur click, et les liens de l'exemple ne sont pas allés nulle part. Si cela ne va nulle part, pourquoi doit-il avoir un lien?

Il corrige également le html formatage, pour mettre le uls à l'intérieur du lis, au lieu qu'ils soient des frères et sœurs. c'est à dire <li><ul><li></li></ul></li> à la place de <li></li><ul><li></li></ul>.

fait un violon: http://jsfiddle.net/filever10/gml4x/