0

ウェブページoshadi-yoga.chで、次のようなリストを含むナビゲーション メニューを取得したいと考えています。

<ul>
    <li class="section-title">Yoga
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>

アコーディオン効果を得るためにいくつかのjqueryを書きました。最初のレベルをクリックすると、2 番目のリストがトグル効果で開きます。

    $(function() {
        $("#lbar li.section-title ul").hide();
        $("#lbar li.section-title").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul").show();
        $("#lbar li.section-titleact").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul li a").click(function() {
            $("#lbar li.section-titleact ul").css("display", "block");
        });
    });

ページを開いたときにサブメニューが非表示になりました。正解です。メニュー項目をクリックすると、サブメニューが表示されます。正解です。最初のレベルのページへのリンクはありません。次に、第 2 レベルのリンクをクリックするとページが開きますが、第 2 レベル<ul>は数秒間非表示になります。これがエラーです。

残念ながら、jquery スクリプトを修正できません。誰かが私を助けることができますか、それとも私が必要とするメニューの例を持っていますか?

4

1 に答える 1

0

コードを少し書き直す必要があります

<ul>
    <li class="section-title"><span>Yoga</span>
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>

スパンを追加しました。

jQuery:

$('.section-title > span').on('click', function()
{
    $(this).siblings('ul').slidetoggle();
});

これが少し役立つことを願っています（または、質問を少し誤解しましたか？）

于 2012-04-20T17:25:47.160 に答える