js三级伸缩菜单

以下是关于 JavaScript 三级伸缩菜单的相关内容：

基础概念：三级伸缩菜单是一种常见的网页导航菜单形式，在用户交互时能够展开和收起多个层级的子菜单。

优势：

提供清晰的导航结构，方便用户快速找到所需内容。
节省页面空间，初始状态下菜单简洁，需要时展开详细选项。

类型：

基于纯 JavaScript 实现。
结合 CSS3 动画效果增强视觉体验。

应用场景：

大型网站的复杂导航。
内容丰富、层级较多的管理系统。

常见问题及解决方法：

菜单展开和收起不流畅：可能是动画效果的实现存在问题，优化相关的 CSS 过渡属性和 JavaScript 逻辑。
子菜单显示异常：检查 HTML 结构是否正确，以及对应的 CSS 样式是否应用准确。

示例代码（纯 JavaScript 实现简单三级伸缩菜单）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      position: relative;
    }

    .submenu {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      background-color: #f1f1f1;
    }

    li:hover>.submenu {
      display: block;
    }
  </style>
</head>

<body>
  <ul>
    <li>菜单 1
      <ul class="submenu">
        <li>子菜单 1-1
          <ul class="submenu">
            <li>子菜单 1-1-1</li>
            <li>子菜单 1-1-2</li>
          </ul>
        </li>
        <li>子菜单 1-2</li>
      </ul>
    </li>
    <li>菜单 2</li>
  </ul>
</body>

</html>

在上述示例中，通过 CSS 控制子菜单的显示和隐藏，利用 :hover 伪类实现鼠标悬停展开子菜单的效果。但这种方式在触摸设备上可能不太友好，如果需要在移动端有良好支持，可能需要使用 JavaScript 来处理点击事件来展开和收起菜单。