ナビゲーションメニューのドロップダウンのトップレベルが機能しない

Question

トップレベルと2つのサブレベルのドロップダウンメニューがあります。サブレベルはうまく機能しているので、クリックすると選択したページに移動します。問題はトップレベルにあります。その上にマウスを置くとサブメニューが表示されますが、クリックするとページに移動しません。

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

問題は、あなたの場合は最初の文の終わりに、あなたの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()意味

- これはSO偉大な説明event.preventDefault() vs. return false

のために答える読んしかし、それは、あなたの問題になりますが、彼らはどこかに行きたい場合は、リンク上のデフォルトの動作を防止する際には注意のようです。

ここにはコメント行のあるfiddleがあります。