links only toggle on mobile when link has hash in href - jquery

Question!

Trying to make it so that the navigation links with children toggle open before you are taken to that page. Right now, code below only goes straight to page even if the parent has children. Thoughts?

UPDATED SOLUTION (jQuery):

jQuery(window).on('resize', function () {
    jQuery('.main-navigation ul li a').toggleClass('toggleClass', jQuery(window).width() < 991);
}).trigger('resize')

jQuery('.main-navigation li a.toggleClass').click(function(e){
   var cl = jQuery(this).data('push');
   if(!cl){
     e.preventDefault();
     jQuery(this).next('ul').slideToggle();
     jQuery(this).data('push',true)
   } 
});

UPDATED SOLUTION (CSS):

.main-navigation li ul {
  display:none;
}

Here's the HTML:

<nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
    <ul>
        <li title="Home">
            <a href="/index.php/home/">Home</a>
        </li>
        <li class="dropdown-1" title="Rentals">
            <a href="/index.php/rentals/">Rentals</a>
            <ul class="level2">
                <li title="Chico">
                    <a href="/index.php/rentals/chico/">Chico</a>
                    <ul class="level3">
                        <li title="Campbell Commons">
                            <a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a>
                        </li>
                        <li title="East of Eaton">
                            <a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a>
                        </li>
                        <li title="La Vista Verde">
                            <a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a>
                        </li>
                        <li title="Longfellow Apartments">
                            <a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a>
                        </li>
                        <li title="Lucian Manor Senior Apartments">
                            <a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a>
                        </li>
                        <li title="Murphy Commons">
                            <a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a>
                        </li>
                        <li title="North Point Apartments">
                            <a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Gridley">
                    <a href="/index.php/rentals/gridley/">Gridley</a>
                    <ul class="level3">
                        <li title="Hazel Hotel">
                            <a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a>
                        </li>
                    </ul>
                </li>
                <li title="Hamilton City">
                    <a href="/index.php/rentals/hamilton-city/">Hamilton City</a>
                    <ul class="level3">
                        <li title="Las Palmas Apartments">
                            <a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a>
                        </li>
                        <li title="Shotover Inn Apartments">
                            <a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Live Oak">
                    <a href="/index.php/rentals/live-oak/">Live Oak</a>
                    <ul class="level3">
                        <li title="Maple Park Apartments, Phase 1">
                            <a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a>
                        </li>
                        <li title="Maple Park Senior Apartments">
                            <a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Marysville">
                    <a href="/index.php/rentals/marysville/">Marysville</a>
                    <ul class="level3">
                        <li title="Marymead Park">
                            <a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a>
                        </li>
                    </ul>
                </li>
                <li title="Orland">
                    <a href="/index.php/rentals/orland/">Orland</a>
                    <ul class="level3">
                        <li title="Rancho de Soto Apartments">
                            <a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Paradise">
                    <a href="/index.php/rentals/paradise/">Paradise</a>
                    <ul class="level3">
                        <li title="Paradise Community Village">
                            <a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a>
                        </li>
                    </ul>
                </li>
                <li title="Red Bluff">
                    <a href="/index.php/rentals/red-bluff/">Red Bluff</a>
                    <ul class="level3">
                        <li title="Brickyard Creek Apartments">
                            <a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Redding">
                    <a href="/index.php/rentals/redding/">Redding</a>
                    <ul class="level3">
                        <li title="Linden Apartments">
                            <a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li title="News">
            <a href="/index.php/news/">News</a>
        </li>
        <li class="dropdown-1" title="Home Ownership">
            <a href="/index.php/home-ownership/">Home Ownership</a>
            <ul class="level2">
                <li title="Active Developments">
                    <a href="/index.php/home-ownership/active-developments/">Active Developments</a>
                    <ul class="level3">
                        <li title="Biggs Estates">
                            <a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a>
                        </li>
                        <li title="Calle Vista">
                            <a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a>
                        </li>
                        <li title="Villa La Michele III">
                            <a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a>
                        </li>
                        <li title="Sierra Vista">
                            <a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a>
                        </li>
                        <li title="Sierra Vista 2">
                            <a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a>
                        </li>
                        <li title="Siskiyou Grove">
                            <a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a>
                        </li>
                    </ul>
                </li>
                <li title="Past Developments">
                    <a href="/index.php/home-ownership/past-developments/">Past Developments</a>
                </li>
                <li title="How to Bid on CHIP Projects">
                    <a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a>
                </li>
                <li title="Homebuyer Education">
                    <a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a>
                </li>
            </ul>
        </li>
        <li title="Jobs">
            <a href="/index.php/jobs/">Jobs</a>
        </li>
        <li title="About Us">
            <a href="/index.php/about-us/">About Us</a>
            <ul class="level2">
                <li title="Leadership">
                    <a href="/index.php/about-us/leadership/">Leadership</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
By : frshjb373


Answers

You need to hide those li level . I see li level1,level2 so we need to hide them first. and jQuery you just forget to add e.preventDefault() function which stops the default action of an element from happening.So that the 2 mistake nothing else. Now you can use your code to. with your jQueryLiveFiddle. In here I just use toggle .

$(document).ready(function() {
  $('ul li a').click(function(e) {
    $(this).next('ul').toggle('blind');;
    e.preventDefault();
  })
});
.level2,
.level3 {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
  <ul>
    <li title="Home">
      <a href="/index.php/home/">Home</a>
    </li>
    <li class="dropdown-1" title="Rentals">
      <a href="/index.php/rentals/">Rentals</a>
      <ul class="level2">
        <li title="Chico">
          <a href="/index.php/rentals/chico/">Chico</a>
          <ul class="level3">
            <li title="Campbell Commons">
              <a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a>
            </li>
            <li title="East of Eaton">
              <a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a>
            </li>
            <li title="La Vista Verde">
              <a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a>
            </li>
            <li title="Longfellow Apartments">
              <a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a>
            </li>
            <li title="Lucian Manor Senior Apartments">
              <a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a>
            </li>
            <li title="Murphy Commons">
              <a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a>
            </li>
            <li title="North Point Apartments">
              <a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Gridley">
          <a href="/index.php/rentals/gridley/">Gridley</a>
          <ul class="level3">
            <li title="Hazel Hotel">
              <a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a>
            </li>
          </ul>
        </li>
        <li title="Hamilton City">
          <a href="/index.php/rentals/hamilton-city/">Hamilton City</a>
          <ul class="level3">
            <li title="Las Palmas Apartments">
              <a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a>
            </li>
            <li title="Shotover Inn Apartments">
              <a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Live Oak">
          <a href="/index.php/rentals/live-oak/">Live Oak</a>
          <ul class="level3">
            <li title="Maple Park Apartments, Phase 1">
              <a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a>
            </li>
            <li title="Maple Park Senior Apartments">
              <a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Marysville">
          <a href="/index.php/rentals/marysville/">Marysville</a>
          <ul class="level3">
            <li title="Marymead Park">
              <a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a>
            </li>
          </ul>
        </li>
        <li title="Orland">
          <a href="/index.php/rentals/orland/">Orland</a>
          <ul class="level3">
            <li title="Rancho de Soto Apartments">
              <a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Paradise">
          <a href="/index.php/rentals/paradise/">Paradise</a>
          <ul class="level3">
            <li title="Paradise Community Village">
              <a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a>
            </li>
          </ul>
        </li>
        <li title="Red Bluff">
          <a href="/index.php/rentals/red-bluff/">Red Bluff</a>
          <ul class="level3">
            <li title="Brickyard Creek Apartments">
              <a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Redding">
          <a href="/index.php/rentals/redding/">Redding</a>
          <ul class="level3">
            <li title="Linden Apartments">
              <a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li title="News">
      <a href="/index.php/news/">News</a>
    </li>
    <li class="dropdown-1" title="Home Ownership">
      <a href="/index.php/home-ownership/">Home Ownership</a>
      <ul class="level2">
        <li title="Active Developments">
          <a href="/index.php/home-ownership/active-developments/">Active Developments</a>
          <ul class="level3">
            <li title="Biggs Estates">
              <a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a>
            </li>
            <li title="Calle Vista">
              <a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a>
            </li>
            <li title="Villa La Michele III">
              <a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a>
            </li>
            <li title="Sierra Vista">
              <a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a>
            </li>
            <li title="Sierra Vista 2">
              <a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a>
            </li>
            <li title="Siskiyou Grove">
              <a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a>
            </li>
          </ul>
        </li>
        <li title="Past Developments">
          <a href="/index.php/home-ownership/past-developments/">Past Developments</a>
        </li>
        <li title="How to Bid on CHIP Projects">
          <a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a>
        </li>
        <li title="Homebuyer Education">
          <a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a>
        </li>
      </ul>
    </li>
    <li title="Jobs">
      <a href="/index.php/jobs/">Jobs</a>
    </li>
    <li title="About Us">
      <a href="/index.php/about-us/">About Us</a>
      <ul class="level2">
        <li title="Leadership">
          <a href="/index.php/about-us/leadership/">Leadership</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>



If you don't want to lose the gotolink behavior using preventDefaultone way is to control the button like:

  • On first click toggle the submenu
  • On second click go to the link

$('.main-navigation li a').click(function(e){
   var cl = $(this).data('push');
   if(!cl){
     e.preventDefault();
     $(this).next('ul').slideToggle();
     $(this).data('push',true)
   } 
});
li ul {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
  <ul>
    <li class="dropdown-1" title="Rentals">
      <a href="http://...">Rentals</a>
      <ul class="level2">
        <li title="Chico">
          <a href="http://...">Chico</a>
          <ul class="level3">
            <li title="Campbell Commons">
              <a href="http://...">Campbell Commons</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

By : DaniP


You need to prevent default behavior of the click on <a>. Something like this.

$('.main-navigation li a').click(function(e){
    e.preventDefault(); //e is click event
    $(this).next('ul').slideToggle();
    return false; //just in case
});


This video can help you solving your question :)
By: admin