Question

我创建了以下代码，当您单击父li时，嵌套的ul显示和隐藏jQuery。

问题是这个标记是动态生成的，我想只禁用父链接上的锚链接，然后让嵌套的ul列表中的链接处于活动状态。

我试过返回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

Answer 1

设置锚点而不是li

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

});

仅使用jQuery删除父li上的链接

1 个答案:

Demo