仅为兄弟姐妹禁用链接 - jQuery

时间：2016-05-26 17:16:47

标签： jquery

我有一个手风琴导航系统，其中大部分导航项目都有子页面，但有些人不会。打开子导航的触发器是禁用的顶级链接。这样做可以使其他没有子页面的顶级链接无法正常工作。会有什么工作。我尝试了以下方法：

＆＃13;
＆＃13; 
// 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");
    }
  });
});
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

看起来像.children（）有效。

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 -->

相关问题
最新问题