javascript - 多级点击子菜单

我想要一个3级的子菜单。

首先，仅应显示主要点（men1，men2）。然后单击“ men1”，“ men1.1 and men 1.2”应可见。当单击“ men1.2”时，“ men1.2.1，men1.2.2和men 1.2.3”应可见，其余应保持不可见

单击“ men2”时，所有其他子项都将消失，只有“ men2.1和men2.2”可见。

我希望你明白我的意思！最后，所有事物都应像膨胀矿石一样充满生气！

到目前为止，这是我的进步

$(document).ready(function(){
  $('#navi ul').click(function(){
    $('#navi').find('.sub1').css('visibility', 'hidden');
    $(this).find('.sub1').css('visibility', 'visible');
  });
  $('#navi ul ul').click(function(){
    $('#navi').find('.sub2').css('visibility', 'hidden');
    $(this).find('.sub2').css('visibility', 'visible');
  });
});

.main {
font-size: 2em;
padding:1em 0 0 0;
}

.sub1 {
    font-size:0.7em;
    padding:0 0 0 1em;
    visibility: hidden;
}

.sub2 {
    font-size:0.7em;
    padding:0.2em 0 1em 2em;
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi">
  <ul class="main">
    <li><a >men1</a>
      <ul class="sub1">
        <li><a >men1.1</a>
          <ul class="sub2">
            <li><a >men1.1.1</a></li>
            <li><a >men1.1.2</a></li>
            <li><a >men1.1.3</a></li>
          </ul>
        </li>
        <li><a >men1.2</a>
          <ul class="sub2">
            <li><a >men1.2.1</a></li>
            <li><a >men1.2.2</a></li>
            <li><a >men1.2.3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <ul class="main">
    <li><a >men2</a>
      <ul class="sub1">
        <li><a >men2.1</a>
          <ul class="sub2">
            <li><a >men2.1.1</a></li>
            <li><a >men2.1.2</a></li>
            <li><a >men2.1.3</a></li>
          </ul>
        </li>
        <li><a >men2.2</a>
          <ul class="sub2">
            <li><a >men2.2.1</a></li>
            <li><a >men2.2.2</a></li>
            <li><a >m2n2.2.3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

如您所见，单击级别1时，级别3并没有消失。
我更喜欢jquery解决方案，因为我正在学习，对我来说更容易理解该解决方案。

希望你能帮我！！先感谢您。

最佳答案

您需要停止在第三级元素上的传播，以防止点击触发父元素：

.sub1 {
    display: none;
}
.sub2 {
    display: none;
}

请注意CSS的更改，以消除页面中的空白区域。

$(document).ready(function () {
    $('#navi > ul > li').click(function () {
        $('#navi .sub1').not( $(this).find('.sub1') ).hide();
        $(this).find('.sub1').toggle();
    });
    $('#navi > ul ul > li').click(function (e) {
        e.stopPropagation();
        $('#navi .sub2').not( $(this).find('.sub2') ).hide();
        $(this).find('.sub2').toggle();
    });
});

Demo

您还提到了幻灯片效果。这是a demo并具有适当位置。