Sal B Sal B - 6 months ago 17
jQuery Question

Disable link only for siblings - jQuery

I have an accordion nav with the majority of the nav items having child pages, however a few don't. The trigger to open the sub nav is the top-level link which is disabled. Doing that makes it so that other top-level links with no sub pages don't work. What would be the work around. I tried the following:



// Off-canvas menu open/close
$(function() {
$('.nav-main > li > a').click(function(e) {
//e.preventDefault(); // disable link

if( $(this).siblings().size() > 0) ) {
e.preventDefault(); // disable link
}

// prevent expand on itself
/*
if ($(this).hasClass('active')) {
return false;
}
*/

// toggle open/close

$('.nav-main > li > a.active').next('.nav-main__sub').slideUp();

if (!$(this).hasClass('active')) {
$(this).next('.nav-main__sub').slideToggle();

$('.nav-main > li > a').find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
$(this).find('i').addClass('fa-angle-up');
$(this).find('i').removeClass('fa-angle-down');
$('.nav-main > li > a').removeClass('active');
$(this).addClass('active');
} else {

$(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
$(this).removeClass("active");
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="offcanvas">
<nav class="nav">
<ul class="vertical menu nav-main js-nav-main__primary">
<li><a href="/moving-relocation/">Moving &amp; Relocation <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="/overview/">Overview</a></li>
<li><a href="">Residential</a></li>
<li><a href="">Corporate</a></li>
<li><a href="">Military</a></li>
<li><a href="">Government</a></li>
<li><a href="">Relocation Management</a></li>
</ul>
</li>
<li><a href="">Workplace Solutions <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="">Overview</a></li>
<li><a href="">Space, Furniture &amp; Move Planning</a></li>
<li><a href="">Office Furniture Products</a></li>
<li><a href="">Commercial Moving &amp; Storage</a></li>
<li><a href="">Vacated Space Services</a></li>
<li><a href="">Ongoing Program Solutions</a></li>
</ul>
</li>
<li><a href="">Global Logistics <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="">Overview</a></li>
<li><a href="">Contract</a></li>
<li><a href="">International</a></li>
<li><a href="">Event</a></li>
<li><a href="">FF&amp;E</a></li>
<li><a href="">Transportation Management</a></li>
</ul>
</li>

<li>
<a href="">About Us <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="">Overview</a></li>
<li><a href="">History</a></li>
<li><a href="">Values</a></li>
<li><a href="">The People of Suddath</a></li>
<li><a href="">Affiliations</a></li>
<li><a href="">News</a></li>
<li><a href="">Policies &amp; Legal</a></li>
<li><a href="">Locations Map</a></li>
</ul>
</li>

<li><a href="">Careers <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="">Overview</a></li>
<li><a href="">Current Jobs</a></li>
<li><a href="">Drive with Us</a></li>
<li><a href="">Career Paths</a></li>
<li><a href="">Benefits</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
<ul class="vertical menu nav-main js-nav-main__contact">
<li><a href="">Get a Quote <i class="fa fa-angle-down"></i></a>
<ul class="vertical menu nav-main__sub">
<li><a href="/overview/">Overview</a></li>
<li><a href="">Residential</a></li>
<li><a href="">Corporate Moving</a></li>
<li><a href="">Relocation</a></li>
<li><a href="">Government Transferees</a></li>
<li><a href="">Military Personnel</a></li>
</ul>
</li>
<li><a href="#">Call Us</a>
<div class="nav-main__contact">
<div class="contact-info">
<span class="contact-info__type">Toll Free:</span>
<span class="contact-info__number">1-NNN-NNN-NNNN</span>
</div>
<div class="contact-info">
<span class="contact-info__type">Local:</span>
<span class="contact-info__number">1-NNN-NNN-NNNN</span>
</div>
</div>
</li>
</ul>
</nav>
</div> <!-- END offcanvas nav -->




Answer

It looks like .children() works.

if( $(this).children().size() > 0) {
   console.log("Has children");
   e.stopPropagation();
}
else {
   console.log("No kids");  
}

// Off-canvas menu open/close
$(function() {
  $('.nav-main > li > a').click(function(e) {
    //e.preventDefault(); // disable link

if( $(this).siblings().size() > 0 ) {
  e.preventDefault(); // disable link
} 
    if ($(this).children().size() > 0) {
      console.log("Has children");
      e.stopPropagation();

      // toggle open/close

      $('.nav-main > li > a.active').next('.nav-main__sub').slideUp();

      if (!$(this).hasClass('active')) {
        $(this).next('.nav-main__sub').slideToggle();

        $('.nav-main > li > a').find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
        $(this).find('i').addClass('fa-angle-up');
        $(this).find('i').removeClass('fa-angle-down');
        $('.nav-main > li > a').removeClass('active');
        $(this).addClass('active');
      } else {

        $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
        $(this).removeClass("active");
      }
    } else {
      console.log("No kids");
    }

    // prevent expand on itself
    /*
    if ($(this).hasClass('active')) {
      return false;
    }
    */

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="offcanvas">
  <nav class="nav">
    <ul class="vertical menu nav-main js-nav-main__primary">
      <li><a href="/moving-relocation/">Moving &amp; Relocation <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="/overview/">Overview</a>
          </li>
          <li><a href="">Residential</a>
          </li>
          <li><a href="">Corporate</a>
          </li>
          <li><a href="">Military</a>
          </li>
          <li><a href="">Government</a>
          </li>
          <li><a href="">Relocation Management</a>
          </li>
        </ul>
      </li>
      <li><a href="">Workplace Solutions <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="">Overview</a>
          </li>
          <li><a href="">Space, Furniture &amp; Move Planning</a>
          </li>
          <li><a href="">Office Furniture Products</a>
          </li>
          <li><a href="">Commercial Moving &amp; Storage</a>
          </li>
          <li><a href="">Vacated Space Services</a>
          </li>
          <li><a href="">Ongoing Program Solutions</a>
          </li>
        </ul>
      </li>
      <li><a href="">Global Logistics <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="">Overview</a>
          </li>
          <li><a href="">Contract</a>
          </li>
          <li><a href="">International</a>
          </li>
          <li><a href="">Event</a>
          </li>
          <li><a href="">FF&amp;E</a>
          </li>
          <li><a href="">Transportation Management</a>
          </li>
        </ul>
      </li>

      <li>
        <a href="">About Us <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="">Overview</a>
          </li>
          <li><a href="">History</a>
          </li>
          <li><a href="">Values</a>
          </li>
          <li><a href="">The People of Suddath</a>
          </li>
          <li><a href="">Affiliations</a>
          </li>
          <li><a href="">News</a>
          </li>
          <li><a href="">Policies &amp; Legal</a>
          </li>
          <li><a href="">Locations Map</a>
          </li>
        </ul>
      </li>

      <li><a href="">Careers <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="">Overview</a>
          </li>
          <li><a href="">Current Jobs</a>
          </li>
          <li><a href="">Drive with Us</a>
          </li>
          <li><a href="">Career Paths</a>
          </li>
          <li><a href="">Benefits</a>
          </li>
        </ul>
      </li>
      <li><a href="/contact/">Contact</a>
      </li>
    </ul>
    <ul class="vertical menu nav-main js-nav-main__contact">
      <li><a href="">Get a Quote <i class="fa fa-angle-down"></i></a>
        <ul class="vertical menu nav-main__sub">
          <li><a href="/overview/">Overview</a>
          </li>
          <li><a href="">Residential</a>
          </li>
          <li><a href="">Corporate Moving</a>
          </li>
          <li><a href="">Relocation</a>
          </li>
          <li><a href="">Government Transferees</a>
          </li>
          <li><a href="">Military Personnel</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Call Us</a>
        <div class="nav-main__contact">
          <div class="contact-info">
            <span class="contact-info__type">Toll Free:</span>
            <span class="contact-info__number">1-NNN-NNN-NNNN</span>
          </div>
          <div class="contact-info">
            <span class="contact-info__type">Local:</span>
            <span class="contact-info__number">1-NNN-NNN-NNNN</span>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</div>
<!-- END offcanvas nav -->

Comments