可展开的 HTML 目录结构控件

以下是一个基本的 HTML 目录结构可展开的控件：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>可展开的目录控件</title>
  <style>
    /* 隐藏子列表 */
    ul ul {
      display: none;
    }
    /* 显示子列表 */
    ul li.active > ul {
      display: block;
    }
  </style>
</head>
<body>
  <h1>目录</h1>
  <ul id='myList'>
    <li>第一项</li>
    <li>第二项
      <ul>
        <li>子项 2.1</li>
        <li>子项 2.2</li>
      </ul>
    </li>
    <li>第三项
      <ul>
        <li>子项 3.1</li>
        <li>子项 3.2</li>
      </ul>
    </li>
  </ul>
  <script>
    // 获取所有列表项
    var items = document.querySelectorAll('#myList li');
    // 遍历所有列表项
    items.forEach(function(item) {
      // 给每个列表项添加点击事件
      item.addEventListener('click', function() {
        // 切换 active 类
        this.classList.toggle('active');
      });
    });
  </script>
</body>
</html>

此控件使用了 HTML、CSS 和 JavaScript，它包含一个标题、一个父列表和若干子列表。每个列表项都可以展开或折叠其子列表，当用户点击父列表项时，该项会切换 active 类，用于控制子列表的显示或隐藏。