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

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);

});

Demo