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显示/隐藏孩子李。

问题在于，当点击链接时（例如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 line 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/

使用jQuery .slidetoggle下拉链接

2 个答案: