简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 请教：树形菜单怎么制作
大家讲道理
大家讲道理 2017-04-11 11:11:42
0
3
474


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

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

membalas semua(3)
大家讲道理
大家讲道理2017-04-11 11:13:42 Tingkat 3

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

Suka +0
Tambah Balasan
伊谢尔伦
伊谢尔伦2017-04-11 11:13:42 Tingkat 2

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>
Suka +0
Tambah Balasan
迷茫
迷茫2017-04-11 11:13:42 Tingkat 1

这个一般是配合JSON数据来生成比较好。
推荐一个插件：http://www.ztree.me/v3/main.php#_zTreeInfo

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！