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链接，它不＆＃39; t有一个.mobile-device类的，我希望它return false

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

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

这是fiddle，其中的行已注释掉。

导航菜单下拉列表顶级不起作用

1 个答案: