实现多级树形分类可折叠菜单特效代码-2

【html部分看上一篇】

js文件：

$(function () {
        /* 如果要指定展开的层级，可以再加一个参数用来判断 */
    /* 后端的数据结构如下，根节点的icon未icon-th，需要前端请求到数据后自己赋值
     初始化数据，如果有子节点数据但是默认不展开，需要后端返回一个child空数组，如果是最后一层则不用返回child
     */
    var json=[];
    var json = [];
    /* 初始化数据 */
    function initData() {
        json=[
            {
                "name": "root",
                "code":"ZKCH",
                "icon": "icon-th",
                "child": [
                    {
                        "name": "2-1",
                        "code":"code21",
                        "child": [
                            {
                                "name": "2-1-1",
                                "code":"code211",
                                "child": [
                                    {
                                        "name": "2-1-1-1",
                                        "code":"code2111",
                                        "child": []
                                    }
                                ]
                            },
                            {
                                "name": "2-1-2",
                                "code":"code212",
                                "child": [{
                                        "name": "2-1-2-1",
                                        "code":"code2121",
                                    },
                                    {
                                        "name": "2-1-2-2",
                                        "code":"code2122",
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        "name": "2-2",
                        "code":"code22",
                        "child": [
                            {
                                "name": "2-2-1",
                                "code":"code221",
                            },
                            {
                                "name": "2-2-2",
                                "code":"code222",
                            }
                        ]
                    }
                ]
            }
        ]
    }
    initData();
    function tree(data) {
        if (data.icon == "icon-th") {
            $("#rootUL").append("<li data-name='" + data.code + "'><div><i class='" + data.icon + "'></i><span>" + data.name + "</span></div></li>");
        }
        /* 循环当前child */
        if(data.child&&data.child.length){
            data.child.forEach(item=>{
                var children = $("li[data-name='" + data.code + "']").children("ul");
                if (children.length == 0) {
                    $("li[data-name='" +  data.code + "']").append("<ul></ul>")
                }
                let icon=''
                var className=""
                if(item.child){
                    if(item.child.length){
                        icon='icon-minus-sign'
                    }else{
                        icon='icon-plus-sign'
                    }
                    className="parent_li"
                }
                /* 给child里追加li子节点 */
                $("li[data-name='" +data.code + "'] > ul").append(
                    "<li data-name='" + item.code + "' class='"+className+"'>" +
                    "<div>" +
                    "<i class='icon " + icon + "'></i><span>" +
                    item.name +
                    "</span></div>" +
                    "</li>");
                if(item.child){
                    
                }
                tree(item)
            })
        }
    }
    tree(json[0])
});

css：

.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li div {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none;
    max-width: 200px;
    cursor:pointer
}

.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>div:hover, .tree li.parent_li>div:hover+ul li div {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}