javascript - 多级点击子菜单

Question

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

首先只应显示要点(men1、men2)。然后单击“men1”，“men1.1 和 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就位了。