03jQuery实现简易递归树目录

3.1介绍

递归树目录在项目中使用频率较高，例如下面的效果就是一个简单的递归树目录结构：

树目录效果图

3.2实现思路

（1） 我们可以先将静态的纯HTML树目录结构写出来 然后在定义数据源来动态展示。

    

        
         

            
a
                

                    
a1
                        

                            
a1-1
                                

                                    
a1-1-1
                                
                            
                            
a1-2
                        
                    
                
            
            
b
                

                    
b1
                
            
            
c
            
d
        
        
    

（2）从上面的静态HTML结构我们可以看出来这种无限的递归是ul标签嵌套li标签 li里面又嵌套ul标签这种无限嵌套类型。
（3）根据上面的结构我们可以定义下面的数据源结构，如下所示:

        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-1-1' }, { name: 'a3-2-2' }] }] },
                ]
            },
            {
                name: 'BBB',
                child: [{ name: 'b1' }, { name: 'b2' }, { name: 'b3' }]
            },
            {
                name: 'CCC',
                child: [{ name: 'c1' }, { name: 'c2' }, { name: 'c3' }]
            },
            {
                name: 'DDD',
                child: [{ name: 'd1' }]
            }

        ];

（4）实现代码

        function createTree(data){
            var str="
";
            for(var i=0;i0){
                    str+=createTree(data[i].child);
                }
                str+="";
            }
            str+="
";
            return str;//这里返回拼接的字符串
        }
        $(".lists").html(createTree(data)); //渲染HTML结构

3.3添加点击事件

        function createTree(data){

            var str="
";
            for(var i=0;i0){
                    str+=createTree(data[i].child);
                }
                str+="";
            }
            str+="
";
            return str;
        }
        $(".lists").html(createTree(data));
        //添加点击事件
        $(".lists").on('click','.item',function(e){
            e.stopPropagation();//阻止事件冒泡 这句很重要
            //判断ul是否存在
           if($(e.target).find("ul").is(':visible')){
            $(e.target).find("ul").hide();
           }else{
            $(e.target).find("ul").show();
           }
        });