JQuery показать все subnav родителя

Question

Как я могу отобразить меню родителя и отобразить все поднавы? например: , когда я нажимаю первый и соскальзываю эти вспомогательные навигаторы сначала-1 сначала-1-1 вначале-1-2 ......

Как всегда, ваша помощь приветствуется!

http://jsfiddle.net/MotoTony/kg8x2ntv/

HTML:

<nav id="nav"> 
    <ul class="nav"> 
     <li class="parent"> 
      <a href="#">first</a> 
      <ul class="nav-child"> 
       <li> 
        <a href="#">first-1</a> 
        <ul class="nav-child"> 
         <li><a href="#">first-1-1</a></li> 
         <li><a href="#">first-1-2</a></li> 
         <li><a href="#">first-1-3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="parent"> 
      <a href="#">2</a> 
      <ul class="nav-child"> 
       <li> 
        <a href="#">first-1</a> 
        <ul class="nav-child"> 
         <li><a href="#">2-1-1</a></li> 
         <li><a href="#">2-1-2</a></li> 
         <li><a href="#">2-1-3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="parent"> 
      <a href="#">3</a> 
      <ul class="nav-child"> 
       <li> 
        <a href="#">first-1</a> 
        <ul class="nav-child"> 
         <li><a href="#">3-1-1</a></li> 
         <li><a href="#">3-1-2</a></li> 
         <li><a href="#">3-1-3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Jquery:

function initMenu() { 
    jQuery('.nav-child').hide(); // Start with nav-childs hidden 
    jQuery('.nav > li.parent a').click(function() { 
     var checkElement = jQuery(this).next(); 

     // When an `<a>` with a nav-child that isn't visible is clicked (tapped)... 
     if ((checkElement.is('.nav-child')) && (!checkElement.is(':visible'))) { 
      // Open the clicked (tapped) nav-child of `<a>` 
      jQuery(this).addClass("active"); 
      checkElement.slideDown(165, 'linear'); 
      // Go to the other `<a>` elements of that nav-child scope and close them 
      // (without closing nav-childs of other scopes, above or below) 
      jQuery(this).parent().siblings("li").children("a").removeClass("active"); 
      jQuery(this).parent().siblings("li").children("a").next(".nav-child").slideUp(160, 'linear'); 
      return false; 
     } 

     if(jQuery(this).hasClass("active")) { 
      jQuery(this).removeClass("active"); 
      checkElement.slideUp(160, 'linear'); 
     } 
    }); 
    } // End initMenu() 

initMenu(); 

я хочу щелчок первой и первой-1 и детей первого-1-1 первый-1-2. ..show в то же время, и когда я нажимаю first-1 или любой subnav не делает слайд-шоу, просто нажмите сначала, чтобы он мог всплывать все subnav.then, когда я нажимаю где-нибудь вне nav-child, все nav-child будут скользить вверх

Answer 1

Попробуйте сделать что-то вроде

function initMenu() { 
 
    jQuery('.nav-child').hide(); // Start with nav-childs hidden 
 
    jQuery('.nav > li.parent a').click(function() { 
 
     var checkElement = jQuery(this).next(); 
 
     var $uls = $(this).next().find('.nav-child').addBack().slideToggle(160, 'linear'); 
 
     $uls.prev('a').toggleClass('active'); 
 

 
     $(this).parent().siblings().find('.nav-child').slideUp(160, 'linear').prev().removeClass('active') 
 
    }); 
 
    } // End initMenu() 
 

 
initMenu();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul class="nav"> 
 
    <li class="parent"> 
 
     <a href="#">first</a> 
 
     <ul class="nav-child"> 
 
     <li> 
 
      <a href="#">first-1</a> 
 
      <ul class="nav-child"> 
 
      <li><a href="#">first-1-1</a></li> 
 
      <li><a href="#">first-1-2</a></li> 
 
      <li><a href="#">first-1-3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="parent"> 
 
     <a href="#">first</a> 
 
     <ul class="nav-child"> 
 
     <li> 
 
      <a href="#">first-1</a> 
 
      <ul class="nav-child"> 
 
      <li><a href="#">first-1-1</a></li> 
 
      <li><a href="#">first-1-2</a></li> 
 
      <li><a href="#">first-1-3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>