多级点击子菜单

Question

我想要一个包含 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 解决方案，因为我正在学习，而且我更容易理解该解决方案。

希望你能帮助我！！提前谢谢你。

Answer 1

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

.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 的位置。