1

我创建了一个具有三个级别的菜单，并且希望在您单击新的子菜单标题时关闭任何打开的子菜单。我已经设法让它适用于第一个子菜单但不适用于第二个子菜单，当我单击第二个子菜单时它会关闭，因为我试图为两个级别重用同一个类有没有办法解决这个问题？此外，由于我已经删除了函数中的类，当您单击它们的标题时它已经停止关闭子菜单，有没有办法实现这一点：

html:

 <nav id="main-nav" role="navigation">
        <div class="block">
            <h2 class="block-title">Main menu</h2>
            <ul>
                <li class="is-active">
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav" href="#">Link ></a>
                      <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav" href="#">Link ></a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li> <a class="toggle-sub-nav" href="#">Sub Link ></a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li>
            </ul>
           </div>
</nav>

子菜单的 CSS：

.sub-nav { 

     height: 0px;
    -webkit-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -moz-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -o-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -ms-transition: all 600ms cubic-bezier(.42,0,.58,1);
    transition: all 600ms cubic-bezier(.42,0,.58,1);
    overflow:hidden;

  }


  .sub-nav-open {

    height: auto;
    max-height: 500px;

  }

.sub-nav li { background-color: #666; }

查询：

$(function() {
    $(".toggle-sub-nav").click(function() {
        $('.sub-nav').removeClass('sub-nav-open');
            $(this).next(".sub-nav").toggleClass('sub-nav-open');
            return false;
    });
});
4

1 回答 1

1

您可以使用notandclosest来避免关闭第一级。

代码：

$(function () {
    $(".toggle-sub-nav").click(function () {
        $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open');
        $(this).next(".sub-nav").toggleClass('sub-nav-open');
        return false;
    });
});

演示：http: //jsfiddle.net/IrvinDominin/CnEy8/

于 2013-10-20T14:12:10.707 回答