JQuery -Menübaum, rutschen nach oben/nach unten

Question

Ich versuche, ein JQuery Dropdow -Menü zu erstellen, bisher funktioniert es gut. Außer dass Sie nur Ordner/Bäume öffnen können und sie nicht wieder schließen können. Ich denke, ich muss EQ oder Geschwister in JQuery verwenden? Aber unerbittlich weiß ich nicht, wie ich sie zusammenstellen kann - könnte jemand zeigen? :)

<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

Es gibt einen Syntaxfehler mit Ihrem Markup - dem einzigen gültigen direkten Nachkomme von a <ul> Element ist <li>. Wenn Sie Ihre Liste nisten möchten, tun Sie dies innerhalb der <li> selbst:

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

Zum Umschalten weisen wir einfach an, nach einem Geschwister zu suchen <ul> Element und anwenden Sie die .slideToggle() Methode, wenn der Link geklickt wird:

$(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();
    });
});

Hier ist eine Demo -Geige: http://jsfiddle.net/teddyrise/2y9fz/ (Weitere Listenelemente hinzugefügt, um den Effekt zu demonstrieren)

Answer 2

Verwenden slideToggle(); Anstatt von slideDown();, Dies macht es so, dass es abhängig von der aktuellen Ausrichtung SlideDown oder Slideup ausgeführt wird.

Answer 3

Dies sollte helfen

Jeder Teil ist beschriftet, daher ist es leicht zu verstehen. Dies ist viel bewusster und nachdenklicher als nur zu verwenden slideToggle. Stattdessen entsteht Situationen, in denen es deutlich nach oben oder unten rutschen sollte, und kehrt frühere Zweige zurück, wenn ein anderer ausgewählt ist.

$('.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
        }
    });
});

Es ist rekursiv und nur abzielt li das hat a ul Kind. Wenn Sie einen anderen Zweig auswählen, werden auch die zuvor geöffnete Filiale zurückgeführt. Ich habe das entfernt anchor Tags, weil die Aktion eingeschaltet sein sollte click, und die Links im Beispiel gingen nirgendwo hin. Wenn es nirgendwo hingeht, warum muss es dann einen Link haben?

Es repariert auch die html Formatierung, um das zu setzen uls im Inneren der liS, anstatt dass sie Geschwister sind. dh <li><ul><li></li></ul></li> Anstatt von <li></li><ul><li></li></ul>.

machte eine Geige: http://jsfiddle.net/filever10/gml4x/