jquery - 如何防止锚标签在点击时跟随链接，但让它显示子菜单？

Question

我在响应式网站上创建了一个 3 级 CSS megamenu。它在桌面尺寸上工作正常，但在移动版本上，如果我点击菜单，而不是显示子菜单，它会跟随href=""属性中添加的链接。

这是移动菜单的屏幕截图（为了制作此屏幕截图，我删除了锚标签以便向您展示它的外观）：

手机菜单截图

在桌面版上很好，因为我使用:hover伪类来显示子菜单，但是我不能在小尺寸上这样做，因为我想让菜单在触摸屏上可用，所以我将:hover伪类转换为点击事件的手段的jQuery。（我不想完全删除锚标记，因为那样我就无法在桌面大小中使用它。）

我尝试使用 jQuery 使链接无效（见下文），它可以工作，但是它不仅阻止锚标记跟随 url，而且还禁用子菜单。

$("li.menu > a").on("click", function() {
  return false;
});

如何改进我的代码以防止浏览器点击链接，但仍以屏幕截图上的方式显示子菜单？

score 3 · Accepted Answer

您可以通过至少 4 种方式做到这一点。

将href属性设置为#（将使您的页面滚动到顶部）
将href属性设置为javascript:void(0);
删除href属性，但使用 csscursor:pointer为每个a元素添加li.menu > a { cursor:pointer; }（我建议这样做）
与 javascript 一起使用e.preventDefault()（jquery，见下文）。

$("li.menu > a").on("click", function(e) { e.preventDefault(); });

score 0 · Accepted Answer

你试过了吗：

   $("li.menu > a").on("click", function(e) {
        e.preventDefault();
        functionToShowTheMenu();
    });

2 回答 2