First look at the effect of using jquery to realize the tree control effect:
Note: the small triangle in front uses the text pattern of bootstrap, and can also be replaced with what you want;
If it is static data, the html structure code is as follows, change it to jquery to dynamically add the version
<div class="tree">
<ul>
<li>
<span><i class="glyphicon glyphicon-triangle-bottom"></i>研发中心</span>
<ul>
<li>
<span><i class="glyphicon glyphicon-triangle-right"></i>中心文件</span>
<a href=""></a>
<ul>
<li>
<span><i class="leaf"></i>文档模板</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>研发体系文件</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>工作站&OA操作说明</span>
<a href=""></a>
</li>
</ul>
</li>
<li>
<span><i class="glyphicon glyphicon-triangle-right"></i>方案资料最新版本发布</span>
<a href=""></a>
<ul>
<li>
<span><i class="leaf"></i>Amlogic</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>移芯</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>ASR</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>瑞昱</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>瑞芯微</span>
<a href=""></a>
</li>
<li>
<span><i class="leaf"></i>MTK</span>
<a href=""></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
After changing to dynamic, you only need to leave a place to put it
<div class="tree"></div>
.tree {
padding: 10px 24px;
height: 990px;
overflow: auto;
}
.tree::-webkit-scrollbar {
/* 垂直滚动条的宽度 */
width: 4px;
/* 水平滚动条的宽度 */
/* height: 10px; */
}
/* 滚动条里面的滑块 */
.tree::-webkit-scrollbar-thumb {
/* 圆角 */
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
/* 滚动条的轨道 */
.tree::-webkit-scrollbar-track {
border-radius: 0;
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
.tree i {
margin-right: 8px;
color: #999AAA;
font-size: 12px;
cursor: pointer;
}
.tree ul {
padding-inline-start: 25px;
}
.tree>ul {
padding-inline-start: 0;
}
.tree li {
line-height: 36px;
list-style: none;
}
.leaf::before {
content: '\00a0\00a0\00a0\00a0';
}
js code
var data = [{
id: 1,
name: '第一级',
child: [{
id: 11,
name: '1.1',
child: [{
id: 111,
name: '1.1.1',
child: []
},
{
id: 112,
name: '1.1.2',
child: []
},
{
id: 113,
name: '1.1.3',
child: []
},
]
},
{
id: 12,
name: '1.2',
child: [{
id: 121,
name: '1.2.1',
child: []
},
{
id: 122,
name: '1.2.2',
child: []
},
{
id: 123,
name: '1.2.3',
child: []
},
{
id: 124,
name: '1.2.4',
child: []
}
]
},
]
}
]
/**创建树状结构 利用forEach递归实现 */
function CreateTree(data) {
var content = `<ul>`;
data.forEach(datas => {
content += `<li><span>`
if (datas.child.length > 0) {
content += `<i class="glyphicon glyphicon-triangle-right"></i>${
datas.name}</span>`
} else {
content += `<i class="left"></i>${
datas.name}</span>`
}
if (datas.child.length > 0) {
content += CreateTree(datas.child);
}
content += `</li>`
});
content += `</ul>`;
return content;
}
/*动态添加树状结构后，添加展开和收缩操作点击事件*/
$(function() {
$('.tree').append(CreateTree(data));
$('.tree > ul > li').find('li').hide();
$('.glyphicon-triangle-right').click(function() {
if ($(this).hasClass('glyphicon-triangle-right')) {
$(this).addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right')
$(this).parent().siblings('ul').children("li").show();
} else {
$(this).addClass('glyphicon-triangle-right').removeClass('glyphicon-triangle-bottom')
$(this).parent().siblings('ul').children("li").hide();
}
})
})
Tips: The control css limits the height of the tree and adjusts the scroll bar to make it more beautiful.