Question

所以我有这个垂直菜单，当您单击父项以显示子元素时向下滑动，当您单击子元素时，它会将您带到链接。

我的问题是当你点击链接时整个子菜单由于其上的slideToggle功能而向上滑动 - 如果点击链接，我怎样才能阻止幻灯片发生？

我的菜单：

<ul id="menu-top" class="menu">
    <li class="has-submenu">
        <a href="http://mywebsite.com/portfolio/">Portfolio</a>
        <ul class="sub-menu" style="display: none;">
            <li class="menu-item">
                <a href="http://mywebsite.com/book-i/">Book I</a>
            </li>
        </ul>
    </li>
    <li class="has-submenu">
        <a href="http://mywebsite.com/retouching/">Headshots</a>
        <ul class="sub-menu" style="display: none;">
            <li class="menu-item">
                <a href="http://mywebsite.com/men/">Men</a>
            </li>
        </ul>
    </li>
    <li class="regular-link">
        <a href="http://mywebsite.com/personal-work/">Personal Work</a>
    </li>
</ul>

JS：

jQuery('#menu-top').children().click(function(e){
    var $next = jQuery(this).find('.sub-menu');
    var $child =('.active-menu');
    $next.stop().slideToggle('slow').toggleClass('active-menu'); 
     jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');

});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});

Answer 1

使用stopPropagation来阻止事件冒泡。

jQuery('.submenu a').click(function(e){

    e.stopPropagation();

});

Answer 2

要在单击ul的子链接时停止slideToggle菜单向上滑动，可以在链接本身的click事件上使用jquery函数stopPropogation()。

$(".shop-by-dept ul li a").click(function(e){
    e.stopPropagation();
});

当浏览器加载下一页时，这会阻止slideToggle()操作向上滑动菜单。

停止幻灯片单击链接时

2 个答案: