03jQuery实现简易递归树目录

3.1介绍

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

3.2实现思路

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

    <div class="lists">
        <!-- 静态树目录结构开始 -->
         <ul>
            <li>a
                <ul>
                    <li>a1
                        <ul>
                            <li>a1-1
                                <ul>
                                    <li>a1-1-1</li>
                                </ul>
                            </li>
                            <li>a1-2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>b
                <ul>
                    <li>b1</li>
                </ul>
            </li>
            <li>c</li>
            <li>d</li>
        </ul>
        <!-- 静态树目录结构结束 -->
    </div>

（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="<ul>";
            for(var i=0;i<data.length;i++){
                str+="<li class='item'>"+data[i].name;
                //在这里判断child是否存在
                if(data[i].child&&data[i].child.length>0){
                    str+=createTree(data[i].child);
                }
                str+="</li>";
            }
            str+="</ul>";
            return str;//这里返回拼接的字符串
        }
        $(".lists").html(createTree(data)); //渲染HTML结构

3.3添加点击事件

        function createTree(data){

            var str="<ul>";
            for(var i=0;i<data.length;i++){
                str+="<li class='item'>"+data[i].name;
                if(data[i].child&&data[i].child.length>0){
                    str+=createTree(data[i].child);
                }
                str+="</li>";
            }
            str+="</ul>";
            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();
           }
        });