frshjb373 frshjb373 - 2 months ago 12
HTML Question

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

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>

Answer

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>