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 ...同时显示，当我点击第一个-1或任何子视图不要滑动时，只需先单击它就可以滑动所有subnav.then，当我点击nav-child之外的任何地方时，所有nav-child都会向上滑动

Answer 1

尝试做类似

的事情

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery显示父级的所有子视图

1 个答案: