请教：树形菜单怎么制作

图片描述
这种树形的菜单如何布局？背景不是单一的，拐角处应该怎么布局？
不用jstree插件的话，自己写怎么写啊？小白，没有思路。。。

javascript html css

阅读 3.7k

3 个回答

✓ 已被采纳

树形组件，一般都是根据数据的树形结构，递归渲染产生的，每次渲染更深的树节点的时候就多渲染一个缩进(在你这个树结构里，缩进应该被竖线来占位)，至于拐角处，要看你用什么在生成树组件，如果是 SVG，大可以画出来，如果是 DOM，一般这种 | |- |_ 都是用图片来完成的。至于应该用哪个图片，这个可以根据当时所处的数据结构判断得知(是否是最后一个节点，子节点是否都被选中，还是部分被选中。)

8k62172

发布于
2016-06-23

更新于
2016-06-23

https://bumfo.github.io/tree_menu.html

<!DOCTYPE html>
<title>Tree Menu</title>

<style>
details > details {
    position: relative;
    padding-left: 15px;
}
details > details::before {
    border-left: 1px solid #ddd;
    content: '\200b';
    position: absolute;
    left: 0;
    height: 100%;
    bottom: 0.5em;
}
summary {
    position: relative;
}
details > details > summary::before {
    content: '\200b';
    position: absolute;
    width: 15px;
    left: -15px;
    background: #ddd;
    height: 1px;
    top: 50%;
}
</style>

<details><summary>Root</summary>
    <details><summary>A</summary>
        <details><summary>A1</summary>
            <details><summary>A11</summary></details>
            <details><summary>A12</summary></details>
            <details><summary>A13</summary></details>
            <details><summary>A14</summary></details>
        </details>
        <details><summary>A2</summary>
            <details><summary>A21</summary></details>
            <details><summary>A22</summary></details>
        </details>
    </details>
    <details><summary>B</summary>
        <details><summary>B1</summary>
            
        </details>
    </details>
</details>