可使用HTML5原生details/summary标签快速实现简易目录树，无需JavaScript即可支持折叠展开，语义明确且兼容性良好（Chrome 12+、Firefox 49+、Edge 79+）。
如果您希望在HTML5页面中嵌入一个具有目录树结构的文档，并实现节点的折叠与展开功能，则需要结合HTML结构、CSS样式和JavaScript交互逻辑。以下是实现此效果的具体步骤：
一、使用语义化HTML构建目录树结构
目录树的本质是嵌套的列表结构，HTML5推荐使用<nav>或<section>包裹<ul>与<li>组合来表达层级关系，确保结构清晰且可访问性良好。
1、在HTML主体中插入一个<nav id="toc-tree">容器元素。
2、在该容器内编写多级无序列表，每级<li>包含一个标题链接（<a href="#section1">第一章</a>）和可选的子<ul>。
立即学习“前端免费学习笔记（深入）”；
3、为每个父级<li>添加class="has-children"标识，便于后续JS识别可折叠节点。
4、为最外层<ul>设置class="toc-root"，作为JavaScript初始化的目标根节点。
二、通过CSS定义折叠/展开视觉状态
CSS负责控制子目录的显隐效果及指示图标，利用:not()伪类与max-height过渡实现平滑收放，避免直接使用display: none导致无法过渡。
1、为所有子<ul>设置初始max-height: 0、overflow: hidden和opacity: 0。
2、为已展开的父节点下的子<ul>添加class="expanded"，并设定足够大的max-height值（如500px）和opacity: 1。
3、在父<li>前插入::before伪元素，显示“▶”或“▼”符号，其内容根据.expanded类动态切换。
4、为所有目录项链接添加cursor: pointer样式，并设置悬停颜色以增强交互反馈。
三、用原生JavaScript实现点击折叠逻辑
不依赖外部库时，可通过事件委托监听整个目录树的点击行为，仅对带有has-children类的<li>触发切换，避免重复绑定事件。
1、获取document.getElementById("toc-tree")作为事件代理根节点。
2、使用addEventListener("click", function(e) {...})捕获冒泡事件。
3、判断e.target是否为has-children节点内部的标题链接或自身，若满足则阻止默认跳转行为。
4、查找该<li>下的第一个<ul>子元素，对其添加或移除expanded类。
5、调用e.stopPropagation()防止父级目录被意外触发。
四、通过details/summary标签快速实现简易目录树
HTML5原生<details>与<summary>标签无需JS即可支持折叠展开，语义明确且兼容性良好（Chrome 12+、Firefox 49+、Edge 79+），适合静态文档目录。
1、将每个目录层级封装为<details><summary>一级标题</summary>...</details>结构。
2、在<summary>内嵌套<span class="toc-level-1">用于样式区分层级深度。
3、子目录直接写在<details>内部，可嵌套多层<details>形成树状结构。
4、通过CSS重置summary::marker并自定义图标，例如：summary::marker { content: "▶ "; }，展开后改为"▼ "。
五、引入轻量级第三方库实现增强交互
当需支持键盘导航、焦点管理、持久化展开状态或动画特效时，可选用极简库如vanilla-treeview或simple-treeview，体积小于3KB且无依赖。
1、通过<script src="https://unpkg.com/vanilla-treeview@1.2.0/dist/treeview.min.js"></script>引入脚本。
2、确保目录HTML结构符合该库要求：根容器含data-treeview="true"属性，各级<li>含data-treeview-node。
3、调用new TreeView(document.getElementById("toc-tree"))初始化实例。
4、通过data-treeview-state="open"或data-treeview-state="closed"预设节点初始状态。
