这种树形的菜单如何布局？背景不是单一的，拐角处应该怎么布局？不用jstree插件的话，自己写怎么写啊？小白，没有思路。。。
光阴似箭催人老，日月如移越少年。
树形组件，一般都是根据数据的树形结构，递归渲染产生的，每次渲染更深的树节点的时候就多渲染一个缩进(在你这个树结构里，缩进应该被竖线来占位)，至于拐角处，要看你用什么在生成树组件，如果是 SVG，大可以画出来，如果是 DOM，一般这种 | |- |_ 都是用图片来完成的。至于应该用哪个图片，这个可以根据当时所处的数据结构判断得知(是否是最后一个节点，子节点是否都被选中，还是部分被选中。)
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>
这个一般是配合JSON数据来生成比较好。推荐一个插件：http://www.ztree.me/v3/main.php#_zTreeInfo
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
树形组件，一般都是根据数据的树形结构，递归渲染产生的，每次渲染更深的树节点的时候就多渲染一个缩进(在你这个树结构里，缩进应该被竖线来占位)，至于拐角处，要看你用什么在生成树组件，如果是 SVG，大可以画出来，如果是 DOM，一般这种 | |- |_ 都是用图片来完成的。至于应该用哪个图片，这个可以根据当时所处的数据结构判断得知(是否是最后一个节点，子节点是否都被选中，还是部分被选中。)
https://bumfo.github.io/tree_menu.html
这个一般是配合JSON数据来生成比较好。
推荐一个插件：http://www.ztree.me/v3/main.php#_zTreeInfo