Javascript Jquery/JS和CSS水平列表导航单击下拉列表超链接无效

我用css和jquery下拉元素创建了一个非常直接的水平导航菜单，但由于某些原因，它似乎没有遵循单击菜单上的链接

我做了一把小提琴：

将鼠标悬停在“Hover”上就可以了，“click”链接应该可以正常工作，但子菜单链接不起作用

---

提前感谢

将您的第一个jQuery代码片段更改为：

$('.sub-menu a').click(function (e) {
    e.stopPropagation();
});

---

链接上的单击正在向上传播并触发父项上的单击事件处理程序。

将选择器更改为

$（'.menu item has children>a'）

，只针对锚标记，而不针对包含子菜单的列表项

---

Fiddle:

您的子菜单链接位于类为

的元素内。菜单有子菜单

，因此，自从添加

后，返回false对于单击事件，链接不可单击。您应该将事件侦听器添加到链接，而不是元素

注意，我将class
menu链接添加到主菜单的
a
元素中。这是一个

最好不要将逻辑链接到HTML元素（例如，使用
a
）。使用类将表示与逻辑分离，并允许您对任何结构（如
span
或
div
等）使用相同的脚本。Ramy我同意这一点，但是，目标元素上没有类，即锚定标记。答案是特定于给定的html。这很公平。给OP一个好的通知不会伤害任何人，也会促进良好的实践：）我相信这是在治疗症状，而不是问题本身，并增加了一个我们可以避免的侦听器。@Ramy-我没有添加单击处理程序，OP添加了。我刚刚修改了他在里面的线路。@j08691没错。我不是说“你”加的。我的意思是我们可以完全避免。
$('.sub-menu a').click(function (e) {
    e.stopPropagation();
});

$('.menu-item-has-children').on('click', '.menu-link', function(e) {
    e.preventDefault();
    var $parentMenu = $(this).parents('.menu-item-has-children');
    $parentMenu.toggleClass('active');
    $('.sub-menu', $parentMenu).toggleClass('visible');
});