jQuery树菜单

Question

我正在做树视图菜单，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;
        });

    });

一切正常但是：

如果另一个孩子打开，我点击另一个孩子就不会关闭。

当我扩展一个孩子时，所有其他子孩子都在开放......

有人可以帮我表演吗，我会疯了！

由于

Answer 1

这两行都会找到相同的元素，幻灯片之间会有竞争条件。请记住，效果是异步操作。最好将第二行作为第一行成功的回调。

我不能在这里给你代码，因为我不了解你想要维护的DOM层次结构。如果您想要树视图，请考虑jsTree。我喜欢它！

Answer 2

如果你使用next（）函数，它只会在点击a之后得到ul。

$(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的代码，除了当前分支中的那些。