0

親のliをクリックすると、ネストされたulがjQueryで表示および非表示になる次のコードを作成しました。

問題は、このマークアップが動的に生成されることです。親リンクのアンカー リンクのみを無効にしてから、ネストされた ul リストのリンクをアクティブにしたいと考えています。

return false を試してみましたが、これによりすべてのリンクが無効になります。親のliを無効にするにはどうすればよいですか?

また、子 li がクリックされたときにメニューが展開/折りたたみされないようにする必要があります。

次のマークアップがあります....

<nav class="shop-cat">
<ul id="menu-shop-categories" class="menu">
    <li><a href="">Clothing</a>
        <ul class="sub-menu">
            <li><a href="">T-Shirts</a></li>
            <li><a href="">Sweatshirts</a></li>
            <li><a href="">Hoodies</a></li>
        </ul>
    </li>
    <li><a href="">Art</a>
        <ul class="sub-menu">
            <li><a href="">Canvas</a></li>
            <li><a href="">Prints</a></li>
        </ul>
    </li>
    <li><a href="">Accessories</a>
        <ul class="sub-menu">
            <li><a href="">Glasses</a></li>
            <li><a href="">Keyrings</a></li>
        </ul>
    </li>
</ul>
</nav>

このjQueryで...

$('#menu-shop-categories > li').click(function() {
    $(this).find('.sub-menu').slideToggle(400);
    return false;     
});

これもcodepenです... http://codepen.io/anon/pen/ieIhC

4

1 に答える 1

2

代わりにアンカーのクリックを設定しますli

$('#menu-shop-categories > li > a').click(function(e) {
    e.preventDefault();
    $(this).siblings('.sub-menu').slideToggle(400);

});

デモ

于 2013-05-21T20:48:27.583 に答える