导航菜单下拉顶层不起作用

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类，则希望它return false 。

从本质event.preventDefault()这意味着event.preventDefault() -请阅读该SO答案以获得更好的解释event.preventDefault（）与return false

但这似乎是您的问题，如果要使链接移至某处，请在防止对链接执行默认操作时要小心。

这是一个小提琴，其中的行已被注释掉。