为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>
添加跳转功能
不能跳转的目录是没有什么用的，我们知道网页可以通过锚点直接跳转到对应的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">></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;
}
最终效果：见左侧
