導航菜單下拉頂層不起作用

我有一個頂層和兩個子層的下拉菜單。事情是，子級別工作正常，我可以點擊它們，它會帶我到我選擇的頁面。問題在於頂層，當我將鼠標懸停在它上面時，它顯示子菜單，但是當我點擊它時，它不會將我帶到頁面。導航菜單下拉頂層不起作用

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並接受答案 –

導航菜單下拉頂層不起作用

回答

相關問題