在html5中实现带目录树的文档嵌入，同时支持目录树的折叠展开功能，可以通过原生技术栈完成，下面分步骤介绍具体实现方式。
一、搭建基础文档与目录树结构
首先需要在html5页面中构建文档主体内容和对应的目录树结构，目录树通常和文档内容对应，点击目录项可以跳转到对应的文档章节。基础的html结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带目录树的文档示例</title>
<style>
/* 后续补充样式 */
</style>
</head>
<body>
<div class="container">
<!-- 目录树区域 -->
<div class="toc-container">
<h3>文档目录</h3>
<ul class="toc-tree">
<li class="toc-item">
<span class="toc-toggle">+</span>
<a href="#chapter1">第一章 基础概念</a>
<ul class="toc-child">
<li><a href="#chapter1-1">1.1 核心定义</a></li>
<li><a href="#chapter1-2">1.2 应用场景</a></li>
</ul>
</li>
<li class="toc-item">
<span class="toc-toggle">+</span>
<a href="#chapter2">第二章 实践操作</a>
<ul class="toc-child">
<li><a href="#chapter2-1">2.1 环境搭建</a></li>
<li><a href="#chapter2-2">2.2 功能实现</a></li>
</ul>
</li>
</ul>
</div>
<!-- 文档内容区域 -->
<div class="doc-content">
<h2 id="chapter1">第一章 基础概念</h2>
<h3 id="chapter1-1">1.1 核心定义</h3>
<p>这里是第一章第一节的内容，介绍相关核心定义。</p>
<h3 id="chapter1-2">1.2 应用场景</h3>
<p>这里是第一章第二节的内容，介绍相关应用场景。</p>
<h2 id="chapter2">第二章 实践操作</h2>
<h3 id="chapter2-1">2.1 环境搭建</h3>
<p>这里是第二章第一节的内容，介绍环境搭建步骤。</p>
<h3 id="chapter2-2">2.2 功能实现</h3>
<p>这里是第二章第二节的内容，介绍功能实现细节。</p>
</div>
</div>
<script>
// 后续补充交互逻辑
</script>
</body>
</html>
二、添加目录树与文档的样式
接下来通过css美化目录树和文档内容的布局，同时设置目录树子项的默认隐藏状态，为折叠展开效果做准备。样式代码如下：
/* 整体容器布局 */
.container {
display: flex;
gap: 20px;
padding: 20px;
}
/* 目录树容器样式 */
.toc-container {
width: 250px;
border-right: 1px solid #e0e0e0;
padding-right: 20px;
}
.toc-container h3 {
margin-top: 0;
font-size: 18px;
color: #333;
}
/* 目录树列表样式 */
.toc-tree {
list-style: none;
padding-left: 0;
}
.toc-item {
margin-bottom: 8px;
cursor: pointer;
}
.toc-toggle {
display: inline-block;
width: 16px;
text-align: center;
margin-right: 4px;
font-size: 14px;
color: #666;
}
/* 子目录默认隐藏 */
.toc-child {
list-style: none;
padding-left: 20px;
display: none;
margin-top: 6px;
}
.toc-child li {
margin-bottom: 6px;
}
/* 目录链接样式 */
.toc-tree a {
text-decoration: none;
color: #333;
font-size: 14px;
}
.toc-tree a:hover {
color: #1890ff;
}
/* 文档内容区域样式 */
.doc-content {
flex: 1;
line-height: 1.6;
}
.doc-content h2 {
color: #222;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 8px;
}
.doc-content h3 {
color: #444;
margin-top: 20px;
}
三、实现目录树折叠展开交互
最后通过javascript为目录树的切换按钮添加点击事件，实现子目录的显示和隐藏，同时切换切换按钮的文本。交互逻辑代码如下：
// 获取所有目录切换按钮
const toggleBtns = document.querySelectorAll('.toc-toggle');
// 遍历按钮添加点击事件
toggleBtns.forEach(btn => {
btn.addEventListener('click', function() {
// 获取当前按钮对应的子目录列表
const childList = this.parentElement.querySelector('.toc-child');
// 判断子目录当前是否显示
if (childList.style.display === 'block') {
// 隐藏子目录，切换按钮文本为+
childList.style.display = 'none';
this.textContent = '+';
} else {
// 显示子目录，切换按钮文本为-
childList.style.display = 'block';
this.textContent = '-';
}
});
});
四、功能扩展说明
如果需要默认展开所有目录，可以在页面加载完成后自动触发一次切换按钮的点击事件，或者直接在css中设置.toc-child的display属性为block，同时把切换按钮的文本默认设为-。如果要实现点击目录项后高亮当前选中项，可以给目录链接添加点击事件，移除其他项的选中样式，给当前点击项添加高亮类名即可。