递归函数：

在函数内部，可以调用其他函数。如果一个函数在内部调用自身本身，这个函数就是递归函数。
举个例子，我们来计算阶乘n! = 1 x 2 x 3 x ... x n，用函数fact(n)表示，可以看出：

fact(n) = n! = 1 x 2 x 3 x ... x (n-1) x n = (n-1)! x n = fact(n-1) x n

所以，fact(n)可以表示为n x fact(n-1)，只有n=1时需要特殊处理。

于是，fact(n)用递归的方式写出来就是：

def fact(n):
    if n==1:
        return 1
    return n * fact(n - 1)；

如果我们计算fact(5)，可以根据函数定义看到计算过程如下：

===> fact(5)
===> 5 * fact(4)
===> 5 * (4 * fact(3))
===> 5 * (4 * (3 * fact(2)))
===> 5 * (4 * (3 * (2 * fact(1))))
===> 5 * (4 * (3 * (2 * 1)))
===> 5 * (4 * (3 * 2))
===> 5 * (4 * 6)
===> 5 * 24
===> 120

用个实例运用一下

<script>
    var data = [
    {
        name: '第一章',
        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: '第二章',
        child: [
            {
                name: 'b1',
                child: [
                    {name: 'b1-1'},
                    {
                        name: 'b1-2',
                        child: [
                            {name: 'b1-2-1'}
                        ]
                    },
                    {name: 'b1-3'},
                ]
            },
            {name: 'b2'},
            {name: 'b3'}
        ]
    },
    {
        name: '第三章',
        child: [
            {
                name: 'c1',
                child: [
                    {
                        name: 'c1-1',
                        child: [
                            {name: 'c1-1-1'},
                            {
                                name: 'c1-1-2',
                                child: [
                                    {name: 'c1-1-1-1'},
                                    {name: 'c1-1-1-2'},
                                ]
                            },
                        ]
                    },
                    {name: 'c1-2'},
                    {name: 'c1-3'},
                ]
            },
            {name: 'c2'},
            {name: 'c3'}
        ]
    }
];
function created(data) {
    var str = '<ul>';
    for(var i = 0; i < data.length; i++) {
        if(data[i].child && data[i].child.length) {
            str += '<li class="sub">'+ '+ ' + data[i].name;
            str += created(data[i].child);  // 在函数里面自己调用自己  这就是递归
        } else {
            str += '<li>'+ '- ' + data[i].name;
        }
        str += '</li>';
    }
    str += '</ul>';
    return str;
}
var list = $('.list')
list.html(created(data));

// 点击收起展开事件
$('.list .sub').click(function(event) {
    // event.stopPropagation(); // 阻止事件冒泡
    // event.target 引用了产生此event对象的dom 节点，而event.currrentTarget 则引用了当前处理节点，我们可以通过这 两个target 是否相等。
    // 这两种方法都可以阻止事件冒泡
    if(event.target == event.currentTarget)
    {
        if($(this).find('ul').is(':visible')) { // is(':visible')判断是否显示
            $(this).find('ul').hide();
        } else {
            $(this).find('ul').show();
        }
    }
</script>

运行的效果如图所示

1.png