使用嵌套列表实现HTML内容分级，结合CSS和JavaScript可创建可折叠树形结构，或利用details与summary标签原生支持展开收起，便于构建清晰目录。

在HTML中实现内容分级，比如目录或树形结构，通常通过嵌套的列表标签来完成。这种方式结构清晰、语义明确，便于维护和样式控制。以下是几种常见且实用的实现方法。

使用无序列表（ul）和有序列表（ol）嵌套

最基础也是最常用的方式是利用 <ul> 和 <ol> 标签进行层级嵌套。每一级子目录作为上级 <li> 中的一个新列表。

示例代码：

<ul>
  <li>第一章
    <ul>
      <li>第一节</li>
      <li>第二节
        <ul>
          <li>小节1</li>
          <li>小节2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>第二章</li>
</ul>

结合CSS实现展开/收起效果

为了让树形结构更实用，可以加入CSS控制显示隐藏，模拟可折叠的目录。

立即学习“前端免费学习笔记（深入）”；

关键思路：给子列表设置默认隐藏，通过点击父级标题切换类名来控制显示。

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

示例（配合少量JavaScript）：

<style>
.tree ul { display: none; }
.tree li.expanded > ul { display: block; }
.toggle { cursor: pointer; user-select: none; }
</style>

<ul class="tree">
  <li class="expanded">
    <div class="toggle">第一章 (+)</div>
    <ul>
      <li>第一节</li>
      <li>
        <div class="toggle">第二节 (-)</div>
        <ul>
          <li>小节1</li>
          <li>小节2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript 可添加事件监听实现点击切换展开状态。

使用details和summary标签（原生支持折叠）

HTML5 提供了 <details> 和 <summary> 标签，无需额外JS即可实现可折叠结构，适合简单场景。

示例：

<details open>
  <summary>第一章</summary>
  <ul>
    <li>第一节</li>
    <li>
      <details>
        <summary>第二节</summary>
        <p>内容介绍...</p>
      </details>
    </li>
  </ul>
</details>

该方式语义清晰，兼容性较好，适合文档类页面目录展示。

基本上就这些。根据需求选择嵌套列表、CSS+JS增强交互，或直接用details标签快速实现。结构清晰的前提下，再通过CSS美化样式即可得到美观的分级目录。不复杂但容易忽略细节的是层级闭合和类名管理。