Jquery 显示父级的所有子导航

Question

我如何显示父菜单并显示所有子导航？例如：当我先点击并滑下那些子导航 first-1 first-1-1 first-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();

我想要先点击 first-1 和 children first-1-1 first-1-2...同时显示，当我点击 first-1 或任何子导航时不要向上滑动，只需先单击它就可以全部向上滑动 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>

Jquery 显示父级的所有子导航

Jquery display all subnav of parent

jquery

slide

nav