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>

必要なものは次のとおりです。

誰かが最初の子をクリックすると、相対リンクの 2 番目の子のみが開きます。

別の 2 番目の子が開いている場合は、別の子をクリックすると閉じるようにします。

同じことが2番目の子でも機能する必要があります... ul#sec1、ul#sec2、および最後のul#sec3の3つのステップがあります。

私が使用しているjQueryコードは次のとおりです。

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

    sec1.each(function () {

        var secc1 = $(this)

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

    });

すべて正常に動作しますが:

別の子が開いていて、別の子をクリックしても閉じません。

1 つの子を展開すると、他のすべてのサブ子が開いています...

誰か私がそれを実行するのを手伝ってくれませんか、私は夢中になるでしょう!

ありがとう

4

2 に答える 2

1

両方の行で同じ要素が検出され、スライド間で競合状態が発生します。効果は非同期操作であることに注意してください。最初の行が成功したときのコールバックとして 2 行目を配置するのが最善です。

あなたが維持したい 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 に答える