javascript - jQuery 如果窗口宽度小于 991px，使 nav > li 不可点击

Question

我有一个带有子菜单项的简单 Bootstrap 菜单。当屏幕尺寸小于 991px 时，我已将子菜单项设置为默认隐藏。

当屏幕尺寸小于 991px 时，出现自定义移动菜单。我希望移动菜单 anchor 标记在单击时显示子菜单，而不是转到其指定的 href 位置。

但是当显示子菜单并点击移动菜单 anchor 标记时，我希望页面转到它们指定的 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
    }
}

解释 pointer-events: none 从 MDN 做什么

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.