为Markdown/HTML文档生成一个简易目录

现在阅览文章的网页往往都带有一个目录，方便点击跳转。目录一般都是根据文档中的标题级别直接生成的。

现在我们也来模仿一个简单的，无非就是把<h1><h2>...的序列转化成树嘛

思路是这样，我们首先找到所有文章的所有标题并且标记上，然后开始从前往后遍历标题，如果如果遇到同一级的标题，那就直接添加这个标题到后面，如果遇到级别更低的标题（h2 遇到 h3），说明从h3开始都是我的子目录，我们递归进入h2的子目录，直到遇到下一个高级别的标题（递归中找到更高的h2），说明完整的子目录生成完成，可以返回了。每一个新的子目录<ul>都是原<li>的子目录。

// 函数的含义是，在第index个标题处生成目录树，该标题级别为hLevel
function genFromTitle(hLevel, index){
	let ele = ''
	while (index < $('.isTitle').length) {
		let t = $('.isTitle').eq(index)
		if (t.attr('hLevel') > hLevel) {
			// 遇到更小的标题，递归生成
			let nt = genFromTitle(t.attr('hLevel'), index)
			ele += `<li>${nt.ele}</li>`
			// 从nt.index到index-1的标题都处理完毕，更新index
			index = nt.index 
		}
		else if (t.attr('hLevel') < hLevel) break // 遇到更大的标题，向上返回
		else {
			// 相同等级平行关系，直接添加标题项，下一个
			ele += `<li>
						<a> ${ t.text() } </a>
					</li>`;
			index ++;
		}
	}
	ele = `<ul>${ele}</ul>`
	return {ele, index} //index 也要返回去，父函数继续往后生成
}
 
// elEssay为文档挂载点，elContent为生成的目录挂载点
function makeEssayContent(elEssay, elContent) {
	// 首先标记所有标题
	for (let i = 1; i <= 6; i++) {
		elEssay.find('h'+i).addClass('isTitle').attr('hLevel', i)
	}
	elContent.html(genFromTitle(1, 0).ele);//从第一个一级标题开始生成
}

对于下面的标题，可以生成正确结果：

数据结构复习

一、线性结构

1.栈和队列

2.链表

二、树形结构

1.二叉排序树

三、排序

<ul>
<li><a> 数据结构复习 </a></li>
<li>
	<ul>
	<li><a> 一、线性结构</a></li>
	<li>
		<ul>
		<li><a> 1.栈和队列 </a></li>
		<li><a> 2.链表</a></li>
		</ul>
	</li>
	<li><a> 二、树形结构 </a></li>
	<li>
		<ul>
		<li><a> 1.二叉排序树 </a></li>
		</ul>
	</li>
	<li><a> 三、排序 </a></li>
	</ul>
</li>
</ul>

• 数据结构复习
• • 一、线性结构
  • • 1.栈和队列
    • 2.链表
  • 二、树形结构
  • • 1.二叉排序树
  • 三、排序

添加跳转功能

不能跳转的目录是没有什么用的，我们知道网页可以通过锚点直接跳转到对应的id，所以只要给每个标题添加一个id，再给对应的目录项设置跳转点就可以了

else {
	t.attr('id', 'tp'+index) // 恰好每个标题有唯一index 直接拿来用
	ele += `<li>
				<a href="#tp${index}"> ${ t.text() } </a>
			</li>`;
	index ++;
}

添加折叠功能

根据上面的图，每个ul外面的li的上一个元素就是这个ul的父元素，所以可以在这个父元素设置标记，点击时将ul折叠即可。

//econtent是我的外包裹元素，这里选中所有符合条件的父元素（能展开和收缩的）
$('.econtent li ul').parent().prev().before($('<span class="foldable">&gt;</span>')) //添加一个标记
$('.foldable').on("click", (this)=>{
	$(this).next().next().slideToggle()
	$(this).toggleClass('collapsed')
})

标记有各种方法，我直接使用了一个大于号，在点击的时候旋转一下，就有生动的效果：

.foldable{
	display: inline;
	float: left;
	margin-left: -1rem; /* 左移一个字符，与没有子项的同级标题对齐 */
	transition: all .2s;
}
.collapsed{
	transform: rotate(90deg);
	transform-origin: center;
}

最终效果：见左侧