title: jQuery if window width is less than 991px, make nav > li a unclickable
body: <p>I have a simple bootstrap menu with submenu items. I have set the submenu items to hide by default when the screen size is less than 991px.  </p>
  
  <p>When the screen size is less than 991px, the custom mobile menu appears. I want the mobile menu anchor tags to show the submenu on click instead of going to their specified href location. </p>
  
  <p>But when the submenu is showing, and the mobile menu anchor tag is clicked, I want the page to go to their specified href location.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>               &lt;nav id="navbar2" class="navbar navbar-default" role="navigation"&gt;
                          &lt;div class="navbar-header"&gt;
                              &lt;button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"&gt; 
                                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; 
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt; 
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt; 
                                  &lt;span class="menu-text"&gt;Menu&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;&lt;!-- end navbar-header --&gt;
  
  
                          &lt;!-- Syed Edit --&gt;
                          &lt;div class="navbar-collapse collapse" id="responsive_nav"&gt;&lt;div class="navbar-nav"&gt;
  
                              &lt;ul class="nav"&gt;&lt;li class=""&gt;&lt;a href="/treatments/" target="_self" class=""&gt;Treatments&lt;/a&gt;&lt;ul&gt;&lt;li class=""&gt;&lt;a href="/treatments/invisible-braces-invisalign/" target="_self" class=""&gt;Invisible braces (Invisalign)&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/treatments/hidden-braces-lingual/" target="_self" class=""&gt;Hidden braces (Lingual)&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/treatments/metal-braces-damon/" target="_self" class=""&gt;Metal braces (Damon)&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/treatments/clear-tooth-coloured-braces-clarity/" target="_self" class=""&gt;Clear tooth coloured braces (Clarity)&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/treatments/fast-treatment-6-months/" target="_self" class=""&gt;Fast treatment (6 months)&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/treatments/the-treatment-process/" target="_self" class=""&gt;The treatment process&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/about-us/" target="_self" class=""&gt;About us&lt;/a&gt;&lt;ul&gt;&lt;li class=""&gt;&lt;a href="/about-us/why-choose-us/" target="_self" class=""&gt;Why Choose us?&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/about-us/what-you-need-know-about-dr-preet/" target="_self" class=""&gt;What you need to know about Dr Preet&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/about-us/in-the-press/" target="_self" class=""&gt;In the press&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/meet-our-team/" target="_self" class=""&gt;Meet our team&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/" target="_self" class=""&gt;See the results&lt;/a&gt;&lt;ul&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/invisalign/" target="_self" class=""&gt;Invisalign&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/damon-braces/" target="_self" class=""&gt;Damon braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/lingual-braces/" target="_self" class=""&gt;Lingual braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/fast-treatment-braces/" target="_self" class=""&gt;Fast treatment braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/fixed-metal-braces/" target="_self" class=""&gt;Fixed metal braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/self-ligating-braces/" target="_self" class=""&gt;Self-ligating braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/hidden-braces/" target="_self" class=""&gt;Hidden braces&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/see-the-results/modern-fixed-braces/" target="_self" class=""&gt;Modern fixed braces&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/cost/" target="_self" class=""&gt;Cost&lt;/a&gt;&lt;ul&gt;&lt;li class=""&gt;&lt;a href="/cost/price-guide/" target="_self" class=""&gt;Price guide&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/cost/finance-plans/" target="_self" class=""&gt;Finance plans&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/information-for-patients/" target="_self" class=""&gt;Information for patients&lt;/a&gt;&lt;ul&gt;&lt;li class=""&gt;&lt;a href="/information-for-patients/caring-for-your-appliance/" target="_self" class=""&gt;Caring for your appliance&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/information-for-patients/faqs/" target="_self" class=""&gt;FAQs&lt;/a&gt;&lt;/li&gt;&lt;li class=""&gt;&lt;a href="/information-for-patients/common-orthodontic-problems/" target="_self" class=""&gt;Common orthodontic problems&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;                            &lt;ul class="nav"&gt;
                                  &lt;li class=""&gt;&lt;a href="/find-us/" target="_self" class=""&gt;Find us&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class=""&gt;&lt;a href="/contact-us/" target="_self" class=""&gt;Contact us&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class=""&gt;&lt;a href="/dentist-referrals/" target="_self" class=""&gt;Dentist referrals&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
  
                          &lt;/div&gt;&lt;/div&gt;&lt;!-- end navbar-collapse --&gt;
                          &lt;!-- Syed Edit --&gt;
  
  
                      &lt;/nav&gt;&lt;!-- end navbar --&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>@media screen and (max-width: 991px) {
      .navbar-nav .nav li &gt; ul {
          display: none!important;
      }
  }
  </code></pre>
  
  <p>This is my attempt at doing this using jQuery:</p>
  
  <pre><code>  function(){
      $(".navbar-nav .nav li a").click(function () {
          e.preventDefault();
          $(".navbar-nav .nav li &gt; ul").css("display","block");
          $(".navbar-nav .nav li &gt; a").removeClass("disabled");
      }); 
  });     
  
   $('.navbar-nav .nav &gt; 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() &lt; 991) {
             $(".navbar-nav .nav li &gt; a").addClass("disabled");
        }
       else {
             $(".navbar-nav .nav li &gt; a").removeClass("disabled");
       }
      });
  </code></pre>