Дерево меню jQuery, скользит вверх/вниз

Question

Я пытаюсь создать меню JQUERY Dropdow, пока он работает нормально. За исключением того, что вы можете открывать только папки/деревья, а не закройте их снова. Я думаю, что я должен использовать эквалайзер или братьев и сестер в jQuery? Но разучно я не знаю, как их собрать - кто -нибудь может показать? :)

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

})

// Саймон

Answer 1

Существует синтаксическая ошибка с вашей разметом - единственный действительный прямой поток <ul> Элемент <li>. Анкет Если вы хотите гнездовать свой список, сделайте это в пределах <li> сам:

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

Для переключения, мы просто рекомендуем искать брата <ul> элемент и применить .slideToggle() Метод на него, когда ссылка нажимается:

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

Вот демонстрационная скрипка: http://jsfiddle.net/teddyrision/2y9fz/ (Добавлено больше элементов списка, чтобы продемонстрировать эффект)

Answer 2

Использовать slideToggle(); вместо slideDown();, это сделает так, чтобы он выполнял складывание или скольжение в зависимости от текущей ориентации.

Answer 3

Это должно помочь

Каждая часть помечена, так что ее легко понять. Это гораздо более осведомлен и продумано, чем просто использование slideToggle. Анкет Вместо этого он создает ситуации, когда он должен отчетливо скользить вверх или вниз, и возвращает предыдущие ветви, когда выбирается другой.

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

Это рекурсивно, и это только нацеливается на li которые имеют ul ребенок. Когда вы выберете другую ветвь, он также вернет ранее открытую ветвь. Я удалил anchor теги, потому что действие должно было быть на click, и ссылки в примере никуда не денушились. Если это никуда не денется, зачем ему нужна ссылка?

Это также исправляет html форматирование, чтобы положить uls внутри liS, вместо того, чтобы они были братьями и сестрами. т.е. <li><ul><li></li></ul></li> вместо <li></li><ul><li></li></ul>.

Сделал скрипку: http://jsfiddle.net/filever10/gml4x/