javascript - 导航菜单下拉顶级不起作用

Question

我有一个包含顶层和两个子层的下拉菜单。问题是子级别工作得很好，我可以点击它们，然后它会带我到我选择的页面。问题出在顶层，当我将鼠标悬停在它上面时它会显示子菜单，但是当我单击它时它不会将我带到页面。

var menu_Sub = $(".menu-has-sub");
var menu_Sub_Li;
$(".mobile-device .menu-has-sub").find(".fa:first").removeClass("fa-angle-right").addClass("fa-angle-down");
menu_Sub.click(function() {
  if ($(".header").hasClass("mobile-device")) {
    menu_Sub_Li = $(this).parent("li:first");
    if (menu_Sub_Li.hasClass("menu-opened")) {
      menu_Sub_Li.find(".sub-dropdown:first").slideUp(function() {
        menu_Sub_Li.removeClass("menu-opened");
        menu_Sub_Li.find(".menu-has-sub").find(".fa:first").removeClass("fa-angle-up").addClass("fa-angle-down");
      });
    } else {
      $(this).find(".fa:first").removeClass("fa-angle-down").addClass("fa-angle-up");
      menu_Sub_Li.addClass("menu-opened");
      menu_Sub_Li.find(".sub-dropdown:first").slideDown();
    }
    return false;
  } else {
    return false;
  }
});
menu_Sub_Li = menu_Sub.parent("li");
menu_Sub_Li.hover(function() {
  if (!($(".header").hasClass("mobile-device"))) {
    $(this).find(".sub-dropdown:first").stop(true, true).fadeIn("fast");
  }
}, function() {
  if (!($(".header").hasClass("mobile-device"))) {
    $(this).find(".sub-dropdown:first").stop(true, true).delay(100).fadeOut("fast");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-menu">
  <ul class="nav-menu-inner">
    <li>
      <a href="connexion">Home</a>
    </li>
    <li>
      <a class="menu-has-sub" href="about-us">About us <i class="fa fa-angle-down"></i></a>
      <!-- Dropdown -->
      <ul class="sub-dropdown dropdown">
        <li>
          <a class="menu-has-sub" href="clients-case-studies">Clients and Case Studies</a>

        </li>
      </ul>
      <!-- End Dropdown -->

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

问题出现在您的第一个 if 语句末尾的 return false 调用中:

menu_Sub.click(function () {
if ($(".header").hasClass("mobile-device")) {
    menu_Sub_Li = $(this).parent("li:first");
    if (menu_Sub_Li.hasClass("menu-opened")) {
...
}
else {
    return false;  // this prevents the default click action from occuring
}
});

你在这里说的基本上是，如果我点击 .menu-has-sub 链接并且它没有 .mobile-device 类，我希望它返回 false。

这基本上意味着 event.preventDefault() - 阅读这个 SO 答案以获得很好的解释 event.preventDefault() vs. return false

但这似乎是你的问题，如果你想让它们去某个地方，那么在阻止对链接的默认操作时要小心。

这是一个fiddle注释掉该行。