preventDefault但激活链接

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()来阻止事件的默认操作发生。

---

啊，现在我看到了你的问题。问题是，当单击菜单项以打开子菜单时，由于该项是指向#的锚点，因此文档将滚动到顶部。

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

或者，只有当被点击的元素是该元素而不是后代时，才可以使用preventDefault：

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

Demo

Answer 2

您可以使用e.target检查单击了哪个元素，如果单击的元素是子菜单链接，请不要阻止默认