0

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

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

我试过返回 false，但这会禁用所有链接。我怎样才能禁用父李？

此外，当单击子 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 回答