递归实现多级目录

263 阅读1分钟

jquery+递归实现多级目录树

  getMuLu(data){
        var str="<ul>"
        for(var i=0;i<data.length;i++){
            str+='<li><span>-</span>'+data[i].child.name
            if(data[i].child){
                str=+getMuLu(data[i].child);
            }
            str+='</li>' 为了能让html结构更清晰// 
        };
        str+="</ul>"+'</li>';
        return str;
    };
    $(".list").html(getMuLu(data));
    $(".list ul li").click(function(event){
        event.stopPropagation();
        if($(this).find("ul").is(":invisible")){
            $(this).find("ul").hide();
            $(this).find("span").text('+')
        }else{
            $(this).find("ul").show();
            $(this).find("span").text('-')
        }
    })
        
    }
```
数据结构是:
```
var data = [
    {
        name:'AAA',
        child:[
             {name:'a1',child:[{name:'a1-1'},{name:'a1-2'}]},
             {name:'a2'},
             {name:'a3',child:[{name:'a3-1'},{name:'a3-2',child:[{name:'a3-2-1'},{name:'a3-2-2'}]}]}
             ]
    },
    {
         name:'BBB',
         child:[{name:'b1'},{name:'b2'},{name:'b3'}]
    },
    {
         name:'CCC',
         child:[{name:'c1'},{name:'c2'},{name:'c3'}]
    }
 ];
 ```