Question

我是编码的完全业余爱好者;我想要一个三级可折叠菜单，点击后会展开。我找到了一些现有的代码，但它仅适用于两级菜单。我无法弄清楚如何更改脚本，以便在单击时打开第三级。任何想法都会最赞赏！

这是现有的脚本：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

与相比较少的代码相比，您可以获得相同的结果。

使用css处理显示可以说更容易管理，javascript只需切换一个你可以在你的CSS中定位的类。这也意味着你可以拥有任意数量的关卡。

它通过在css +

中使用下一个兄弟选择器来工作

$('.menu-trigger').click(function(){
  $(this).toggleClass('active')
  
  // if you really wish to keep the jquery animation you can do this
  // $(this).next('ul').slideToggle()
})

/* you can use the sibling selector '+' to target the list */
.menu-trigger + ul {
  display: none;
}

.menu-trigger.active + ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu-trigger">parent</a>
    <ul>
      <li>
        <a class="menu-trigger">child</a>
        <ul>
          <li>
            <a class="menu-trigger">grandchild</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

我写了这个，它很简单，但有点说明你想要实现的目标。

$('li').hover(function(){
    $(this).children('ul:eq(0)').show();
}, function(){
    $(this).children('ul:eq(0)').hide();
});

http://codepen.io/clarenswd/pen/GjBaWp

Javascript三级可折叠菜单

2 个答案: