<div class="tree" id="tree">
<details>
<summary class="tree-item">
项目1
</summary>
<details>
<summary class="tree-item">
文件夹
</summary>
<details>
<summary class="tree-item">
sdd
</summary>
</details>
</details>
<details>
<summary class="tree-item">
chrome test
</summary>
</details>
</details>
<details>
<summary class="tree-item">
项目2
</summary>
<details>
<summary class="tree-item">
文件夹2-1
</summary>
<details>
<summary class="tree-item">
文件夹2-1-1
</summary>
<details>
<summary class="tree-item">
文件夹2-1-1-1
</summary>
<details>
<summary class="tree-item">
文件夹2-1-1-1-1
</summary>
<details>
<summary class="tree-item">
文件夹2-1-1-1-1-1
</summary>
</details>
</details>
</details>
</details>
</details>
</details>
<details>
<summary class="tree-item">
文件夹1
</summary>
<details>
<summary class="tree-item">
文件夹
</summary>
</details>
<details>
<summary class="tree-item">
文件夹2
</summary>
</details>
</details>
<details>
<summary class="tree-item">
项目3
</summary>
<details>
<summary class="tree-item">
文件夹1
</summary>
<details>
<summary class="tree-item">
1
</summary>
<details>
<summary class="tree-item">
文件夹2
</summary>
</details>
</details>
</details>
<details>
<summary class="tree-item">
文件夹
</summary>
</details>
<details>
<summary class="tree-item">
文件夹
</summary>
</details>
<details>
<summary class="tree-item">
文件夹
</summary>
</details>
<details>
<summary class="tree-item">
文件夹的副本
</summary>
</details>
<details>
<summary class="tree-item">
点点点
</summary>
</details>
<details>
<summary class="tree-item">
hewei
</summary>
<details>
<summary class="tree-item">
hewei02
</summary>
</details>
</details>
</details>
</div>html,
body {
margin: 0;
height: 100%;
}
.tree {
flex: 1;
overflow: auto;
padding: 4px 0;
position: relative;
}
.tree summary {
outline: 0;
padding-left: 30px;
list-style: none;
background: repeating-linear-gradient(90deg, #999 0 1px, transparent 0px 2px)
0px 50%/20px 1px no-repeat;
/* background: linear-gradient(#999,#999) 0px 50%/20px 1px no-repeat; */
}
.tree details:last-child {
background-size: 1px 23px;
}
.tree > details:not(:last-child) > details:last-child {
background-size: 1px 100%;
}
.tree details {
padding-left: 40px;
background: repeating-linear-gradient(#999 0 1px, transparent 0px 2px) 40px
0px/1px 100% no-repeat;
/* background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat; */
}
.tree > details {
background: none;
padding-left: 0;
}
.tree > details > summary {
background: none;
}
.tree summary {
display: flex;
align-items: center;
height: 46px;
font-size: 15px;
line-height: 22px;
color: rgba(0, 0, 0, 0.85);
cursor: default;
}
.tree summary::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
height: 38px;
background: #eef2ff;
border-radius: 8px;
z-index: -1;
opacity: 0;
transition: 0.2s;
}
.tree summary:hover::after {
opacity: 1;
}
.tree summary:not(:only-child)::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
margin-right: 8px;
border: 1px solid #999;
background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,
linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}
.tree details[open] > summary::before {
background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}
// 仅用于生成结构
const treeData = [
{
"id": 2,
"name": "项目1",
"parentId": 1,
"fileCount": 14,
"children": [
{
"id": 8,
"name": "文件夹",
"parentId": 2,
"fileCount": 12,
"children": [
{
"id": 137,
"name": "sdd",
"parentId": 8,
"fileCount": 0
}
]
},
{
"id": 221,
"name": "chrome test",
"parentId": 2,
"fileCount": 2
}
]
},
{
"id": 52,
"name": "项目2",
"parentId": 1,
"fileCount": 10,
"children": [
{
"id": 54,
"name": "文件夹2-1",
"parentId": 52,
"fileCount": 10,
"children": [
{
"id": 55,
"name": "文件夹2-1-1",
"parentId": 54,
"fileCount": 0,
"children": [
{
"id": 56,
"name": "文件夹2-1-1-1",
"parentId": 55,
"fileCount": 0,
"children": [
{
"id": 57,
"name": "文件夹2-1-1-1-1",
"parentId": 56,
"fileCount": 0,
"children": [
{
"id": 58,
"name": "文件夹2-1-1-1-1-1",
"parentId": 57,
"fileCount": 0
}
]
}
]
}
]
}
]
}
]
},
{
"id": 53,
"name": "文件夹1",
"parentId": 1,
"fileCount": 12,
"children": [
{
"id": 80,
"name": "文件夹",
"parentId": 53,
"fileCount": 11
},
{
"id": 224,
"name": "文件夹2",
"parentId": 53,
"fileCount": 0
}
]
},
{
"id": 69,
"name": "项目3",
"parentId": 1,
"fileCount": 55,
"children": [
{
"id": 70,
"name": "文件夹1",
"parentId": 69,
"fileCount": 12,
"children": [
{
"id": 4,
"name": "1",
"parentId": 70,
"fileCount": 3,
"children": [
{
"id": 51,
"name": "文件夹2",
"parentId": 4,
"fileCount": 1
}
]
}
]
},
{
"id": 91,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 102,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 113,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 121,
"name": "文件夹的副本",
"parentId": 69,
"fileCount": 10
},
{
"id": 136,
"name": "点点点",
"parentId": 69,
"fileCount": 0
},
{
"id": 140,
"name": "hewei",
"parentId": 69,
"fileCount": 3,
"children": [
{
"id": 142,
"name": "hewei02",
"parentId": 140,
"fileCount": 1
}
]
}
]
}
]
function gen_tree(childs){
var html = ''
childs.forEach(el => {
html+=`<details>
<summary class="tree-item">
${el.name}
</summary>`
if (el.children && el.children.length) {
html += gen_tree(el.children)
}
html+= `</details>`
})
return html;
}
console.log(gen_tree(treeData))
tree.innerHTML = gen_tree(treeData)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.