1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ss{
height: 0
width: 0
position: absolute
border: 20px solid tan
border-color: transparent transparent #1fd224 transparent
}
.s1{
border-width:80px
top: 100px
left: 400px
}
.s2{
border-width:100px
top: 115px
left: 382px
}
.s3{
border-width:120px
top: 126px
left: 362px
}
.s4{
border-width:140px
top: 140px
left: 342px
}
.dd{
height: 130px
width: 40px
position: absolute
top: 420px
left: 460px
background-color: #1fd224
}
</style>
</head>
<body>
<div class="s1 ss"></div>
<div class="s2 ss"></div>
<div class="s3 ss"></div>
<div class="s4 ss"></div>
<div class="dd">
</div>
</body>
</html>
看着有点丑，楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
// 生成树结构function tree(list) {
const result = []
for (let value of list) {
// 排除空字符串的情况
if (!value) {
continue
}
const values = value.split('/')
// 查找树结构的当前级别是否已经存在，不存在则创建对象，并添加入列表。
let current = result.find(item =>item.name === values[0])
if (current === void 0) {
current = {}
result.push(current)
}
for (let i = 0, length = values.lengthi <lengthi++) {
current.name = values[i]
if (i <length - 1) {
// 如果还有下一级内容，判断当前是否有 children，没有则构建.
if (current.children === void 0) {
current.children = []
}
// 查找下一级对象，为下一遍遍历构建对象
let nextCurrent = current.children.find(item =>item.name === values[i + 1])
if (nextCurrent === void 0) {
nextCurrent = {}
current.children.push(nextCurrent)
}
current = nextCurrent
}
}
}
return result
}
============ 假装分割线 ===========
以上代码是生成树的函数，调用 tree 函数并传入你的 input 数据，返回值就是生成的树。百科没找到传代码的地方了。
