javascript - 防止默认但激活链接

Question

在我的导航菜单中，我有一个想要使用的下拉菜单。实际的下拉菜单很好，我已经使用 preventDefault(); 阻止了自动冒泡，但现在下拉菜单中的所有链接都不再起作用。

如何才能使下拉菜单正常工作，不冒泡并且下拉菜单中的所有链接都正常工作？

编辑:我也使用了 event.stopPropagation() 也没有效果。这是怎么回事？!

这是我的代码:

// Toggle dropdowns
$('.menu-item-has-children').click(function(e){
    e.preventDefault();
    $(this).find('.sub-menu').toggleClass('open');
});

Answer 1

要停止冒泡，请使用 event.stopPropagation() .

仅使用event.preventDefault()以防止事件的默认操作发生。

<小时/>

啊，现在我明白你的问题了。问题是，当单击菜单项打开子菜单时，由于该项目是指向 # 的 anchor ，文档将滚动到顶部。

为了避免这种情况，我建议删除 href="#"。

或者，仅当单击的元素是该元素而不是后代元素时，您才可以使用 preventDefault:

$('.menu-item-has-children').on('click', function(e){
    if(this == e.target) e.stopPropagation();
    // ...
});

Demo