Question

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

首先，只显示要点（men1，men2）。然后点击＆＃34; men1＆＃34; ＆＃34;男人1.1和男人1.2＆＃34;应该变得可见。点击＆＃34; men1.2＆＃34; ＆＃34;男人1.2.1，男人1.2.2和男人1.2.3＆＃34;应该是可见的，其余的应该保持不变

点击＆＃34; men2＆＃34;所有其他子应该消失，只有＆＃34; men2.1和men2.2＆＃34;是可见的。

我希望你明白我的意思！最后，一切都应该像生长矿石一样动画！

这是我到目前为止的进展

＆＃13;

$(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');
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

正如您所看到的，当单击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。

多级单击子菜单

1 个答案: