参考与https://ke.qq.com/webcourse/417875/100498562#taid=10178943642918995&vid=5285890806745023231
如有侵权还请速速联系！！！
1，效果图
2，源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>目录树结构</title>
</head>
<style type="text/css">
div {
margin-left: 10px;
cursor: pointer;
}
/* 添加加号 */
div.has-child::before {
content: "+";
}
div.has-child>div {
display: none;
}
/* 只要是展开状态则设置下面的div为block */
div.has-child.expend>div {
display: block;
}
div.has-child.expend::before {
content: "-";
}
</style>
<body>
<div id="demo"></div>
<script type="text/javascript">
var data = [{
name: '第一章',
children: [{
name: '第一节',
children: [{
name: '标题一'
},
{
name: '标题二'
}
]
}, {
name: '第二节',
children: [{
name: '标题一'
},
{
name: '标题二'
},
{
name: '标题三'
}
]
}]
},
{
name: '第二章',
children: [{
name: '第一节',
children: [{
name: '标题一'
},
{
name: '标题二'
}
]
}, {
name: '第二节',
children: [{
name: '标题一'
},
{
name: '标题二'
},
{
name: '标题三'
}
]
}]
},
{
name: '第三章',
children: [{
name: '第一节',
children: [{
name: '标题一'
}]
}]
}
];
// 生成目录树结构结构，data创建所需数据
// 返回值为一个node节点
function treeNode(data) {
// 创建节点
var resultDom = document.createElement('div');
data.forEach(function(item) {
// 创建章节元素节点
var oDiv = document.createElement('div');
oDiv.innerText = item.name;
//创建节和标题节点
// 判断下面是否含有子节点
// 判断children是否存在并且有长度
if (item.children && item.children.length > 0) {
//创建生成子节点数
var node = treeNode(item.children);
oDiv.appendChild(node);
//节点添加class
oDiv.classList.add("has-child");
oDiv.onclick = function(e) {
// 阻止事件冒泡
e.stopPropagation();
// 如果已展开点击删除样式
// 否则添加样式
if (this.classList.contains('expend')) {
this.classList.remove("expend");
} else {
this.classList.add('expend');
}
}
}
//把每一章的数据插入进去
resultDom.appendChild(oDiv)
});
return resultDom;
}
var node = treeNode(data);
var demo = document.getElementById('demo');
// 渲染到页面中
demo.appendChild(node);
</script>
</body>
</html>
记录每一个前端小案例！！！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
