Question

单击菜单级别1时，应该展开，并且应关闭所有兄弟姐妹。单击时，所有级别的菜单项都应该发生相同的情况。

示例：单击菜单级别3，级别4的菜单项应不显示，并且级别3 的所有菜单项应显示。

我怎样才能做到这一点？这就是我到目前为止所拥有的：

HTML：

<div id="div1">
 <ul class="nav level-1">
  <li class="has-submenu">
     <a href="#">Menu Level1</a>
    <ul class="level-2">
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li class="has-submenu">
                 <a href="#">Menu Level3</a>
                 <ul class="level-4">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-3">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li><a href="#">Menu-Level3</a></li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-4">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
     </ul>
  </li>
  <li class="has-submenu">
     <a href="#">Menu Level1 </a>
     <ul class="level-2">
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li class="has-submenu">
                 <a href="#">Menu Level3</a>
                 <ul class="level-4">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-3">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li><a href="#">Menu-Level3</a></li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-4">
                    <li><a href="#">Menu-Level4</a></li>
                    <li><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
     </ul>
  </li>
  <li class="has-submenu">
     <a href="#">Menu Level1</a>
     <ul class="level-2">
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li class="has-submenu">
                 <a href="#">Menu Level3</a>
                 <ul class="level-4">
                    <li class="end"><a href="#">Menu-Level4</a></li>
                    <li class="end"><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-3">
                    <li class="end"><a href="#">Menu-Level4</a></li>
                    <li class="end"><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
        <li class="has-submenu">
           <a href="#">Menu-Level2</a>
           <ul class="level-3">
              <li><a href="#">Menu-Level3</a></li>
              <li class="has-submenu">
                 <a href="#">Menu-Level3</a>
                 <ul class="level-4">
                    <li class="end"><a href="#">Menu-Level4</a></li>
                    <li class="end"><a href="#">Menu-Level4</a></li>
                 </ul>
              </li>
           </ul>
        </li>
     </ul>
  </li>

CSS：

a {
    display:block;
    background:#aaa;
    border:1px solid #ccc;
    padding:5px;
    color:#fff;
}
li li {
    display:none;
}
.has-submenu > a:after {
    content:' + ';
}
.has-submenu .nav-open > a:after {
    content:' - ';
}
li li a {
    padding-left:40px;
    background:#888;
}
li li li a {
    padding-left:80px;
    background:#333;
}

jQuery：

$('.has-submenu > a').on('click', function (e) {
    e.preventDefault();
    $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle();
    $(this).parent().siblings().find('> ul > li').slideUp();
    $(this).parent().siblings().removeClass('nav-open');
});

如果我们点击菜单级别4，则只显示红色突出显示的部分：

Answer 1

这些更新将展示您正在寻找的行为。

添加名为hidden的CSS类：

.hidden {
    display:none !important;
}

将JavaScript第4行替换为：

$(this).parent().siblings().toggleClass('hidden').find('> ul > li').slideUp();

关闭父导航时，这不会关闭/打开子窗口，但您的问题中未提及该行为。

实施例： http://jsfiddle.net/t3jb04L1/3/

如何使用嵌套菜单项创建可折叠菜单？

1 个答案: