使用jQuery .slidetoggle的下拉链接

Question

我正在使用以下代码使用.slidetoggle和jQuery创建一个下拉菜单：

<ul>
    <li class="expand"><span>Dropdown</span>
        <ul class="sub-menu">
            <li style="display: none;"><a href="http://google.com">Foo</a></li>
            <li style="display: none;"><a href="http://google.com">Foo</a></li>
            <li style="display: none;"><a href="http://google.com">Foo</a></li>
        </ul>
    </li>
</ul>

它可以正常工作，然后单击li。expand会显示/隐藏li的孩子。

问题在于，当单击链接（例如google.com）时，在大多数浏览器上，菜单会在激活链接之前先将ul.sub菜单向上切换。

单击链接后如何停止菜单切换？

为了澄清起见，上面的代码在Safari上按要求工作。

必要时使用JSFiddle示例： https ：//jsfiddle.net/fcs5n8o6/3/

Answer 1

添加：

$('.sub-menu').find('a').click(function(event){
     event.stopPropagation();                          
});

根据event.stopPropagation方法，单击的链接不会通知li元素有关单击的信息（它们现在可以这样做），并且不会触发li的单击处理程序。

更新了jsfiddle

还有更好，更简洁的解决方案：

<ul>
    <li class="expand"><span>Dropdown</span>
        <ul class="sub-menu" style="display: none;">
            <li><a href="http://google.com">Foo</a></li>
            <li><a href="http://google.com">Foo</a></li>
            <li><a href="http://google.com">Foo</a></li>
        </ul>
    </li>
</ul>

<script>
    $(".expand").click(function() {
        $(".sub-menu").slideToggle("slow");
        $('.sub-menu').find('li').click(function(event){
             event.stopPropagation();                          
        });
    });
</script>

新的jsfiddle

我还编辑了jQuery选择器，它们有些过于繁琐且效果不佳。

至于您的网站：查找文件custom.js？ver = 1行405：

$(".leftnav ul li.removelink.driver").click(function() {
    event.stopPropagation();
    $(".leftnav ul li.removelink.driver li").slideToggle("slow");
});

为此：

$(".leftnav ul li.removelink.driver").click(function() {

        $(".leftnav ul li.removelink.driver li").slideToggle("slow")
        .click(function(event){event.stopPropagation();});

    });

Answer 2

我认为您需要event.stopPropagation();

https://jsfiddle.net/zer00ne/yoggar2z/1/