当前位置: 动力学知识库 > 问答 > 编程问答 >

slide - Jquery display all subnav of parent

问题描述:


How can i display the parent's menu and display all the subnavs?

for example:

when i click first and will slide down those sub navs first-1 first-1-1 first-1-2......

As always, your assistance is appreciated!

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();

i want the click first and the first-1 and children first-1-1 first-1-2...show in same time,and when i click first-1 or any subnav don't slideup,just click first it's can slideup all subnav.then,when i click anywhere outside the nav-child,all nav-child will slide up

网友答案:

Try to do something like

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: