jquery简单实现树形控件

先看看使用jquery实现树形控件效果：

注意：前面的小三角利用了bootstrap的文字图案，也可换成自己想要的；

如果是静态数据，html结构代码如下，将其改为jquery动态添加版本

<div class="tree">
<ul>
                    <li>
                        <span><i class="glyphicon glyphicon-triangle-bottom"></i>研发中心</span>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-triangle-right"></i>中心文件</span>
                                <a href=""></a>
                                <ul>
                                    <li>
                                        <span><i class="leaf"></i>文档模板</span>
                                        <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="leaf"></i>研发体系文件</span>
                                        <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="leaf"></i>工作站&OA操作说明</span>
                                        <a href=""></a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-triangle-right"></i>方案资料最新版本发布</span>
                                <a href=""></a>
                                <ul>
                                    <li>
                                        <span><i class="leaf"></i>Amlogic</span>
                                        <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="leaf"></i>移芯</span>
                                        <a href=""></a>
                                    </li>

                                    <li>
                                        <span><i class="leaf"></i>ASR</span>
                                        <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="leaf"></i>瑞昱</span>
                                        <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="leaf"></i>瑞芯微</span>
                                        <a href=""></a>
                                    </li>

                                    <li>
                                        <span><i class="leaf"></i>MTK</span>
                                        <a href=""></a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </li>
                </ul>
</div>

改为动态后，只需要留个位置放就行啦

<div class="tree"></div>

.tree {
    padding: 10px 24px;
    height: 990px;
    overflow: auto;
}

.tree::-webkit-scrollbar {
    /* 垂直滚动条的宽度 */
    width: 4px;
    /* 水平滚动条的宽度 */
    /* height: 10px; */
}


/* 滚动条里面的滑块 */

.tree::-webkit-scrollbar-thumb {
    /* 圆角 */
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}


/* 滚动条的轨道 */

.tree::-webkit-scrollbar-track {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
}

.tree i {
    margin-right: 8px;
    color: #999AAA;
    font-size: 12px;
    cursor: pointer;
}

.tree ul {
    padding-inline-start: 25px;
}

.tree>ul {
    padding-inline-start: 0;
}

.tree li {
    line-height: 36px;
    list-style: none;
}

.leaf::before {
    content: '\00a0\00a0\00a0\00a0';
}

js代码

var data = [{
        id: 1,
        name: '第一级',
        child: [{
                id: 11,
                name: '1.1',
                child: [{
                        id: 111,
                        name: '1.1.1',
                        child: []
                    },
                    {
                        id: 112,
                        name: '1.1.2',
                        child: []
                    },
                    {
                        id: 113,
                        name: '1.1.3',
                        child: []
                    },
                ]
            },
            {
                id: 12,
                name: '1.2',
                child: [{
                        id: 121,
                        name: '1.2.1',
                        child: []
                    },
                    {
                        id: 122,
                        name: '1.2.2',
                        child: []
                    },
                    {
                        id: 123,
                        name: '1.2.3',
                        child: []
                    },
                    {
                        id: 124,
                        name: '1.2.4',
                        child: []
                    }
                ]
            },
        ]
    }
]

/**创建树状结构 利用forEach递归实现 */
function CreateTree(data) {
    var content = `<ul>`;
    data.forEach(datas => {
        content += `<li><span>`
        if (datas.child.length > 0) {
            content += `<i class="glyphicon glyphicon-triangle-right"></i>${datas.name}</span>`
        } else {
            content += `<i class="left"></i>${datas.name}</span>`
        }
        if (datas.child.length > 0) {
            content += CreateTree(datas.child);
        }
        content += `</li>`
    });
    content += `</ul>`;
    return content;
}
/*动态添加树状结构后，添加展开和收缩操作点击事件*/
$(function() {
    $('.tree').append(CreateTree(data));
    $('.tree > ul > li').find('li').hide();
    $('.glyphicon-triangle-right').click(function() {
        if ($(this).hasClass('glyphicon-triangle-right')) {
            $(this).addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right')
            $(this).parent().siblings('ul').children("li").show();
        } else {
            $(this).addClass('glyphicon-triangle-right').removeClass('glyphicon-triangle-bottom')
            $(this).parent().siblings('ul').children("li").hide();
        }
    })
})

tips：控件css限定了tree的高度以及调整了滚动条使其更美观。