无限树 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{
            list-style: none;

        }
        ul{
            padding-left:20px;
        }


        .close{
            display: inline-block;
            width: 15px;
            height:15px;
            background: url("close.png") no-repeat  center;
            background-size: contain;
        }
        .open{
            display: inline-block;
            width: 15px;
            height:15px;
            background: url("open.png") no-repeat  center;
            background-size: contain;
        }
        .leaf{
            display: inline-block;
            width: 15px;
            height:15px;
            background: url("leaf.png") no-repeat  center;
            background-size: contain;
        }
        .leafName{

            color:green;
            padding-left:10px;
            padding-right:10px;

        }
        .openTrue{

            color:gray;

        }
    </style>
</head>
<body>
<div id="tree"></div>
<script type="text/javascript" src="../../../static/plugins/jquery/jquery-1.9.1.js"></script>
<script>
    var arr = [
        {
            name: "父节点1 - 展开",open:true,
            children: [
                {
                    name: "父节点11 - 折叠",
                    children: [
                        {name: "叶子节点111", nid: "nid"},
                        {name: "叶子节点112",},
                        {name: "叶子节点113"},
                        {name: "叶子节点114"}
                    ]
                },
                {
                    name: "父节点12 - 折叠",
                    children: [
                        {name: "叶子节点121"},
                        {name: "叶子节点122"},
                        {name: "叶子节点123"},
                        {name: "叶子节点124"}
                    ]
                },
                {name: "父节点13 - 没有子节点", isParent: true}
            ]
        },
        {
            name: "父节点2 - 折叠",
            children: [
                {
                    name: "父节点21 - 展开",
                    children: [
                        {name: "叶子节点211"},
                        {name: "叶子节点212"},
                        {name: "叶子节点213"},
                        {name: "叶子节点214"}
                    ]
                },
                {
                    name: "父节点22 - 折叠",
                    children: [
                        {name: "叶子节点221"},
                        {name: "叶子节点222"},
                        {name: "叶子节点223"},
                        {name: "叶子节点224"}
                    ]
                },
                {
                    name: "父节点23 - 折叠",
                    children: [
                        {name: "叶子节点231", children: [
                            {name: "叶子节点231", children: [
                                {name: "叶子节点231"},
                                {name: "叶子节点232"},
                                {name: "叶子节点233"},
                                {name: "叶子节点234",children: [
                                    {name: "叶子节点231"},
                                    {name: "叶子节点232"},
                                    {name: "叶子节点233"},
                                    {name: "叶子节点234",children: [
                                        {name: "叶子节点231"},
                                        {name: "叶子节点232"},
                                        {name: "叶子节点233"},
                                        {name: "叶子节点234",children: [
                                            {name: "叶子节点231"},
                                            {name: "叶子节点232"},
                                            {name: "叶子节点233"},
                                            {name: "叶子节点234"}
                                        ]}
                                    ]}
                                ]}
                            ]},
                            {name: "叶子节点232"},
                            {name: "叶子节点233"},
                            {name: "叶子节点234"}
                        ]},
                        {name: "叶子节点232"},
                        {name: "叶子节点233"},
                        {name: "叶子节点234"}
                    ]
                }
            ]
        },
        {name: "父节点3 - 没有子节点", isParent: true}

    ];
    var str=""
    function createTree(arr){
        if(arr){
            var children=arr;
            str+="<ul>";
            for(var j=0;j<children.length;j++){
                str+="<li>"
                if(children[j]["children"]){
                    if(children[j]["open"]){
                        str+="<div open='true'><span class='close'></span><span class='openTrue'>"+children[j]["name"]+"</span></div>";
                    }else{
                        str+="<div open='false'><span class='open'></span><span class='openTrue'>"+children[j]["name"]+"</span></div>";
                    }

                }else{
                    str+="<div><span class='leaf'></span><span class='leafName'>"+children[j]["name"]+"</div>";
                }

                createTree(children[j]["children"])
                str+="</li>"
            }
            str+="</ul>";
        }
        return str;
    }


$("#tree").html(createTree(arr))
    $("[open=true]").each(function(){
        $(this).next().show()
    })
    $("[open=false]").each(function(){
        $(this).next().hide()
    })
    $(document).on("click",".close",function(){
        $(this).parent().next().hide()
        $(this).addClass("open").removeClass("close")
    })
    $(document).on("click",".open",function(){
        $(this).parent().next().show()
        $(this).addClass("close").removeClass("open")
    })


</script>
</body>
</html>
posted @ 2018-11-27 17:37  刘浩2561179983  阅读(358)  评论(0)  编辑  收藏  举报