js实现一个表面上有三层的折叠菜单

在JavaScript中，我们可以使用HTML、CSS和JavaScript（通常是jQuery库或原生JS）来实现一个有三层折叠的菜单。下面是一个简单的示例：

首先，我们创建HTML结构：

<ul id="menu">
  <li class="parent">
    <a href="#">一级菜单</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单1</a></li>
      <li><a href="#">二级菜单2</a></li>
      <li class="parent">
        <a href="#">三级菜单</a>
        <ul class="sub-menu">
          <li><a href="#">三级菜单1</a></li>
          <li><a href="#">三级菜单2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

然后使用CSS设置样式和默认状态：

#menu {
  list-style-type: none;
  padding: 0;
}

.parent ul {
  display: none; /* 隐藏未展开的子菜单 */
}

最后，使用JavaScript添加点击事件处理函数来控制菜单的折叠和展开：

$(document).ready(function() {
  // 获取所有一级菜单项
  var parentItems = $('#menu .parent');

  // 点击一级菜单时展开相应的子菜单
  parentItems.on('click', function(e) {
    e.preventDefault(); // 阻止默认链接跳转
    $(this).children('.sub-menu').slideToggle(200); // 展开或折叠子菜单
  });
});

在这个例子中，当用户点击一级菜单项时，对应的二级菜单会滑动显示或隐藏。如果二级菜单中有另一个嵌套的三级菜单，可以递归地应用同样的逻辑。