JQuery дерево меню - PullRequest
Новая
       16

JQuery дерево меню

0 голосов
/ 13 января 2011

Я делаю древовидное меню, HTML выглядит примерно так: 

<ul id="sec1">

    <li>
        <a href="">First</a>

        <ul id="sec2">

            <li>
                <a href="">aaaa</a>

                <ul id="sec3">

                    <li><a href="">1</a></li>
                    <li><a href="">2</a></li>

                </ul>

            </li>


            <li><a href="">bbbb</a></li>

        </ul>

    </li>

    <li><a href="">Second</a></li>

    <li><a href="">Third</a></li>

</ul>

Все, что мне нужно, это:

когда кто-то нажимает на первого ребенка, он открывается ТОЛЬКОвторой дочерний элемент относительной ссылки.

Если другой второй дочерний элемент открыт, я бы хотел, чтобы он закрывался, когда я щелкаю по другому.

То же самое должно работать для второго дочернего элемента ... существует тришаги: ul # sec1, ul # sec2 и последний ul # sec3.

Я использую код jQuery: 

var sec1 = $('ul.sec1 li a');

    sec1.each(function () {

        var secc1 = $(this)

        secc1.click(function () {
            $(this).parent().find('ul').slideToggle();
            return false;
        });

    });

Все работает нормально, но:

если другой дочерний элемент открыт, и я нажимаю на другого, он не закрывается.

Когда я раскрываю одного дочернего элемента, внутри открываются все остальные дочерние дочерние элементы ...

Может кто-нибудь помочь мне выполнить это, я сойду с ума!

Спасибо

Ответы [ 2 ]

1 голос
/ 14 января 2011

Если вы используете функцию next (), она получит ТОЛЬКО ul после нажатия a. 

$(function ()
{
    $('#sec1 li a').each(function ()
    {
        $(this).click(function (event)
        {
            event.preventDefault(); // Prevents the browser to navigate to the specified url (href)

            // Close all other ul's excluding the ul's in the current branch.
            $("#sec1 ul").not($(this).next()).not($(this).parentsUntil("#sec1")).slideUp();

            $(this).next().slideToggle(); // Toggle the targeted ul
        });
    });
});

Редактировать:
Добавлен код, закрывающий другойul, кроме тех, что в текущей ветке.

1 голос
/ 13 января 2011

Обе линии найдут один и тот же элемент, и между слайдами будет условие гонки. Помните, что эффекты являются асинхронной операцией. Лучше всего поставить вторую строку в качестве обратного вызова при успешном завершении первой строки.

Я не могу дать вам код здесь, потому что я не понимаю иерархию DOM, которую вы хотите поддерживать. Если вы хотите дерево, рассмотрите jsTree . Я люблю это!

...