JQuery Menú Árbol, deslízate hacia arriba/hacia abajo

Question

Estoy tratando de crear un menú jQuery dropdow, hasta ahora está funcionando bien. Excepto que solo puede abrir carpetas/árboles, no cerrarlas nuevamente. ¿Supongo que tengo que usar EQ o hermanos en jQuery? Pero desplegable, no sé cómo armarlos, ¿alguien podría mostrar? :)

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

})

//Simón

Answer 1

Hay un error de sintaxis con su marcado: el único descendiente directo válido de un <ul> El elemento es <li>. Si quieres anidar tu lista, hazlo dentro del <li> sí mismo:

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

Para alternar, simplemente instruimos a buscar un hermano <ul> elemento y aplicar el .slideToggle() Método para que se haga clic en el enlace:

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

Aquí hay un violín de demostración: http://jsfiddle.net/teddyrised/2y9fz/ (Se agregó más elementos de la lista para demostrar el efecto)

Answer 2

Usar slideToggle(); en vez de slideDown();, esto lo hará para que realice una diapositiva o deslizante dependiendo de la orientación actual.

Answer 3

Esto debería ayudar

Cada parte está etiquetada, por lo que es fácil de entender. Esto es mucho más consciente y pensado que solo usar slideToggle. En su lugar, crea situaciones en las que debe deslizarse hacia arriba o hacia abajo claramente, y vuelve a las ramas anteriores cuando se selecciona otra.

$('.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 recursivo y solo se dirige li que tienen un ul niño. Cuando seleccione una rama diferente, también revertirá la rama abierta previamente. Quité el anchor etiquetas, porque la acción era estar en click, y los enlaces en el ejemplo no fueron a ninguna parte. Si no va a ninguna parte, ¿por qué necesita tener un enlace?

También arregla el html formato, para poner el uls dentro del liS, en lugar de que sean hermanos. es decir <li><ul><li></li></ul></li> en vez de <li></li><ul><li></li></ul>.

hizo un violín: http://jsfiddle.net/filever10/gml4x/