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

我有一个顶层和两个子层的下拉菜单。事情是，子级别工作正常，我可以点击它们，它会带我到我选择的页面。问题在于顶层，当我将鼠标悬停在它上面时，它显示子菜单，但是当我点击它时，它不会将我带到页面。导航菜单下拉顶层不起作用

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 -->

任何帮助，将不胜感激。谢谢。在您的通话return false

来源

2017-05-09 dileoh

请同时发布您的CSS，这是这个问题的关键。 –

，问题就出现在你的第一个if语句的结束：

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() - 阅读本SO回答一个很好的解释event.preventDefault() vs. return false

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

这里是一个fiddle与行注释掉。

来源

2017-05-09 03:41:47

就是这样！非常感谢你！我会看看链接。 – dileoh

谢谢@dileoh - 如果这能够回答你的问题，我会喜欢它，如果你可以upvote并接受答案 –

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

回答

相关问题