4

この質問のコードを使用して、表示/非表示を切り替えています

サブメニューを表示および非表示にする jQuery .toggle()

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral > li > a').click(function() {
    event.preventDefault();
    $(this).siblings('.sub-menu').slideToggle('slow');
});

問題は、私のサブメニューに多くのアイテムを含む独自のサブメニューがあることです。このコードを次のレベルでも機能するように適応させる方法はありますか?

重要な情報: wordpress はデフォルトで同じクラスの子 UL を作成するため、両方とも .sub-menu.

お気に入り：

<ul id="menu-lateral" class="menu">
    <li id="menu-item-29"><a href="#">Parent Level 1</a>
        <ul class="sub-menu">
            <li id="menu-item-108"><a href="#">Parent Level 2</a>
                <ul class="sub-menu">
                    <li id="menu-item-104"><a href="#">Element</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

フィドル: http://jsfiddle.net/qfygM/1/

助けてくれてありがとう！

更新: 解決策はここにあります >> http://jsfiddle.net/qfygM/7/

ゼニス製。

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral li a').click(function(event){
if ($(this).next('ul.sub-menu').children().length !== 0) {     
    event.preventDefault();
}
$(this).siblings('.sub-menu').slideToggle('slow');});
4

2 に答える 2

4

はい、この場合、 $('#menu-lateral li a')現在使用している直接の子セレクターではなく、子孫セレクターをセレクターとして使用できます - $('#menu-lateral > li > a')。

ここでjsFiddle。

現在、子孫セレクターを使用しているため、将来のすべての降順の「レベル」は $(this).siblings('.sub-menu').slideToggle('slow');ステートメントで個別にターゲットにされ、非常に簡単に拡張可能になります。

于 2013-07-09T19:31:17.873 に答える