使用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/