0

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

    });

一切正常，但是：

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

当我展开一个孩子时，所有其他子孩子都打开了......

有人可以帮我表演一下吗，我要疯了！

谢谢

4

2 回答 2

1

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

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

于 2011-01-13T01:11:06.587 回答
1

如果您使用 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 的代码，除了当前分支中的那些。

于 2011-01-14T13:41:17.797 回答