『本站树文档的实现方法』
效果虽然粗糙，但胜在简单，仅通过css和js来实现
使用方法：编辑文章时，无序列表第一列用来填写识别字符，从第二列开始正常编辑内容即可，如：
- 树文档
- 这里才是第一列实现方法
通过JS识别UL的第一列，识别通过后对当前UL进行处理：
- 给当前UL添加树文档对应的选择器
- 移除或隐藏用来识别的第一列
- 给每一个有子列的li添加按钮
- 给按钮绑定点击事件
更多设置同样可以在识别字符后面加上其他的字符，然后通过js识别出来进行后续的操作，如：
- 树文档 sole
- 这里才是第一列当js判断出识别列中包含”sole“时，给当前UL再添加一个sole模式需要的选择器...
下面是本站完整的实现代码，唯一需要改的就是把.article>ul改成你主题正文UL所在位置
<style>
.tools_tree{padding:0 0 0 42px;margin:0}
.tools_tree p{padding:0;margin:0}
.tools_tree li{padding:0;margin:0}
.tools_tree li ul{padding:0 0 0 42px;margin:0 0 0 -12px;border-left:1px solid #ebebeb;display:none;}
.tools_tree li .dot{float:left;margin:0 0 0 -35px;width:20px;cursor:pointer;user-select:none;background:url(/tools/tree/ico.show.svg) center 50% no-repeat;}
.tools_tree li.open > ul{display:block;}
.tools_tree li.open > .dot{background:url(tools/tree/ico.hide.svg) center 50% no-repeat;}
</style>
<script>
$(document).ready(function(){
$(".article>ul").each(function(){
$this = $(this);
$html = $this.children("li:nth-child(1)").html();
//识别树文档
if($html.includes("树文档")){
//标记树文档
$this.addClass("tools_tree");
$this.children("li:nth-child(1)").remove();
//识别默认全部展开
if($html.includes("all")){
$this.find("li").addClass("open");
}else{
//识别首列展开
if($html.includes("first")){
$this.find("li:nth-child(1)").addClass("open");
}
//标记sole模式
if($html.includes("sole")){
$this.addClass("tools_tree_sole");
}
}
}
});
//为每个有子列的li添加点击按钮
$(".tools_tree li").each(function(){
$this = $(this);
if($this.children("ul").length){
$this.prepend("<div class=dot> </div>");
}
});
//点击动作
$("li .dot").click(function(){
$(this).parent().toggleClass("open");
});
//sole模式点击动作
$(".tools_tree_sole li .dot").click(function(){
if($(this).parent().hasClass("open")){
$(this).parent().prevAll().removeClass("open");
$(this).parent().nextAll().removeClass("open");
}
});
});
</script>