albero di menu jQuery, scivolare su/giù

Question

Sto cercando di creare un menu a gocce jQuery, finora funziona bene. Tranne il fatto che puoi aprire solo cartelle/alberi, non chiuderle di nuovo. Immagino che devo usare l'EQ o i fratelli in jQuery? Ma infatto non so come metterli insieme - qualcuno potrebbe mostrare? :)

<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

C'è un errore di sintassi con il tuo markup: l'unico discendente diretto valido di a <ul> L'elemento è <li>. Se vuoi nidificare la tua lista, fallo all'interno del <li> si:

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

Per attivare il bordo, istruiamo semplicemente di cercare un fratello <ul> elemento e applicare il .slideToggle() metodo ad esso quando viene fatto clic sul collegamento:

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

Ecco un violino demo: http://jsfiddle.net/teddiised/2y9fz/ (Aggiunti più elementi elenchi per dimostrare l'effetto)

Answer 2

Uso slideToggle(); invece di slideDown();, questo lo renderà in modo che si esibisca slied -awn o slideup a seconda dell'orientamento corrente.

Answer 3

Questo dovrebbe aiutare

Ogni parte è etichettata, quindi è facile da capire. Questo è molto più consapevole e pensiero che semplicemente usando slideToggle. Invece crea situazioni in cui dovrebbe scivolare verso l'alto o verso il basso e ripristina i rami precedenti quando viene selezionato un altro.

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

È ricorsivo e si rivolge solo li che hanno un ul bambino. Quando si seleziona un ramo diverso, ripristinerà anche il ramo precedentemente aperto. Ho rimosso il anchor tag, perché l'azione doveva essere accesa click, e i collegamenti nell'esempio non sono andati da nessuna parte. Se non va da nessuna parte, perché deve avere un link?

Risolve anche il html formattazione, per mettere il uls all'interno del liS, invece di essere fratelli. cioè <li><ul><li></li></ul></li> invece di <li></li><ul><li></li></ul>.

ha fatto un violino: http://jsfiddle.net/filever10/gml4x/