Árvore do menu jQuery, deslize para cima/para baixo

Question

Estou tentando criar um menu JQuery DropDow, até agora está funcionando bem. Exceto que você só pode abrir pastas/árvores, não fechá -las novamente. Eu acho que tenho que usar o EQ ou os irmãos no jQuery? Mas, sem rutação, não sei como montá -los - alguém poderia 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(); 
    })

})

// Simon

Answer 1

Há um erro de sintaxe com sua marcação - o único descendente direto válido de um <ul> elemento é <li>. Se você quiser aninhar sua lista, faça -o dentro do <li> em si:

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

Para alternar, simplesmente instruímos a procurar um irmão <ul> elemento e aplique o .slideToggle() método para ele quando o link é clicado:

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

Aqui está um violino de demonstração: http://jsfiddle.net/teddyrised/2y9fz/ (Adicionado mais itens de lista para demonstrar o efeito)

Answer 2

Usar slideToggle(); ao invés de slideDown();, isso fará com que ele realize slidown ou slide -up, dependendo da orientação atual.

Answer 3

Isso deve ajudar

Cada parte é rotulada, por isso é fácil de entender. Isso é muito mais consciente e pensado do que apenas usar slideToggle. Em vez disso, cria situações em que deve deslizar para cima ou para baixo distintamente e reverte ramos anteriores quando outro é selecionado.

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

É recursivo, e apenas tem como alvo li que têm um ul filho. Quando você seleciona uma ramificação diferente, ele também reverterá a ramificação aberta anteriormente. Eu removi o anchor tags, porque a ação deveria estar em click, e os links no exemplo não foram a lugar algum. Se não for a lugar nenhum, por que precisa ter um link?

Ele também conserta o html formatação, para colocar o ulestá dentro do lis, em vez de serem irmãos. ou seja <li><ul><li></li></ul></li> ao invés de <li></li><ul><li></li></ul>.

fez um violino: http://jsfiddle.net/filever10/gml4x/