jQueryウィンドウ幅が991px未満の場合、nav> liをunclickableにします。

Question

私はサブメニュー項目を持つ簡単なブートストラップメニューを持っています。画面サイズが991px未満の場合、デフォルトで非表示にするサブメニュー項目を設定しました。

画面サイズが991px未満の場合、カスタムモバイルメニューが表示されます。私はモバイルメニューのアンカータグが指定されたhrefの場所に行くのではなく、クリックしてサブメニューを表示するようにしたい。

しかし、サブメニューが表示され、モバイルメニューのアンカータグがクリックされると、指定したhrefの場所にページが移動します。

これは私のHTMLです：

   <nav id="navbar2" class="navbar navbar-default" role="navigation"> 
         <div class="navbar-header"> 
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="menu-text">Menu</span> 
          </button> 
         </div><!-- end navbar-header --> 


         <!-- Syed Edit --> 
         <div class="navbar-collapse collapse" id="responsive_nav"><div class="navbar-nav"> 

          <ul class="nav"><li class=""><a href="/treatments/" target="_self" class="">Treatments</a><ul><li class=""><a href="/treatments/invisible-braces-invisalign/" target="_self" class="">Invisible braces (Invisalign)</a></li><li class=""><a href="/treatments/hidden-braces-lingual/" target="_self" class="">Hidden braces (Lingual)</a></li><li class=""><a href="/treatments/metal-braces-damon/" target="_self" class="">Metal braces (Damon)</a></li><li class=""><a href="/treatments/clear-tooth-coloured-braces-clarity/" target="_self" class="">Clear tooth coloured braces (Clarity)</a></li><li class=""><a href="/treatments/fast-treatment-6-months/" target="_self" class="">Fast treatment (6 months)</a></li><li class=""><a href="/treatments/the-treatment-process/" target="_self" class="">The treatment process</a></li></ul></li><li class=""><a href="/about-us/" target="_self" class="">About us</a><ul><li class=""><a href="/about-us/why-choose-us/" target="_self" class="">Why Choose us?</a></li><li class=""><a href="/about-us/what-you-need-know-about-dr-preet/" target="_self" class="">What you need to know about Dr Preet</a></li><li class=""><a href="/about-us/in-the-press/" target="_self" class="">In the press</a></li></ul></li><li class=""><a href="/meet-our-team/" target="_self" class="">Meet our team</a></li><li class=""><a href="/see-the-results/" target="_self" class="">See the results</a><ul><li class=""><a href="/see-the-results/invisalign/" target="_self" class="">Invisalign</a></li><li class=""><a href="/see-the-results/damon-braces/" target="_self" class="">Damon braces</a></li><li class=""><a href="/see-the-results/lingual-braces/" target="_self" class="">Lingual braces</a></li><li class=""><a href="/see-the-results/fast-treatment-braces/" target="_self" class="">Fast treatment braces</a></li><li class=""><a href="/see-the-results/fixed-metal-braces/" target="_self" class="">Fixed metal braces</a></li><li class=""><a href="/see-the-results/self-ligating-braces/" target="_self" class="">Self-ligating braces</a></li><li class=""><a href="/see-the-results/hidden-braces/" target="_self" class="">Hidden braces</a></li><li class=""><a href="/see-the-results/modern-fixed-braces/" target="_self" class="">Modern fixed braces</a></li></ul></li><li class=""><a href="/cost/" target="_self" class="">Cost</a><ul><li class=""><a href="/cost/price-guide/" target="_self" class="">Price guide</a></li><li class=""><a href="/cost/finance-plans/" target="_self" class="">Finance plans</a></li></ul></li><li class=""><a href="/information-for-patients/" target="_self" class="">Information for patients</a><ul><li class=""><a href="/information-for-patients/caring-for-your-appliance/" target="_self" class="">Caring for your appliance</a></li><li class=""><a href="/information-for-patients/faqs/" target="_self" class="">FAQs</a></li><li class=""><a href="/information-for-patients/common-orthodontic-problems/" target="_self" class="">Common orthodontic problems</a></li></ul></li></ul>       <ul class="nav"> 
           <li class=""><a href="/find-us/" target="_self" class="">Find us</a></li> 
           <li class=""><a href="/contact-us/" target="_self" class="">Contact us</a></li> 
           <li class=""><a href="/dentist-referrals/" target="_self" class="">Dentist referrals</a></li> 
          </ul> 

         </div></div><!-- end navbar-collapse --> 
         <!-- Syed Edit --> 


        </nav><!-- end navbar --> 

これはCSSです：

@media screen and (max-width: 991px) { 
    .navbar-nav .nav li > ul { 
     display: none!important; 
    } 
} 

これはjQueryのを使用してこれを行うことで、私の試みです：

function(){ 
    $(".navbar-nav .nav li a").click(function() { 
     e.preventDefault(); 
     $(".navbar-nav .nav li > ul").css("display","block"); 
     $(".navbar-nav .nav li > a").removeClass("disabled"); 
    }); 
});  

$('.navbar-nav .nav > li a').click(function (e) { 
    e.preventDefault(); 
    if ($(this).hasClass('disabled')) 
    return false; 
    else 
    window.location.href = $(this).attr('href'); 
}); 

}); 

    $(window).resize(function() { 
     if ($(window).width() < 991) { 
      $(".navbar-nav .nav li > a").addClass("disabled"); 
     } 
    else { 
      $(".navbar-nav .nav li > a").removeClass("disabled"); 
    } 
    }); 

Answer 1

あなたがでそれを行うことができますcss

@media screen and (max-width: 991px) { 
    .navbar-nav .nav > li a { 
     pointer-events: none 
    } 
} 

012何 pointer-events: noneの

説明MDN

要素がマウスイベントの対象になることはありませんから行います。ただし、マウスイベントは、子孫がポインタイベントを他の値に設定している場合、その子孫要素をターゲットにすることができます。このような状況では、マウスイベントは、イベントキャプチャ/バブルフェーズ中に、この親要素のイベントリスナーを子孫への/からの途中で適切にトリガーします。