如何创建带有嵌套菜单项的可折叠菜单？

Question

当单击菜单级别1时，它应该展开，所有兄弟节点都应该关闭。同样的情况应发生在所有级别的菜单项上，同时单击。

示例:单击菜单级别3，第4级菜单项不应显示，第3级菜单项应显示。

我怎样才能做到这一点？到目前为止，我的情况如下：

JSFiddle

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/