使用 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-menu 向上切换。

如何在单击链接时阻止菜单向上切换？

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

JSFiddle 示例（如果需要）：https://jsfiddle.net/fcs5n8o6/3/

Answer 1

添加这个：

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

根据event.stopPropagation method，点击链接不会通知 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>

new 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/