算法 --- > 递归实现多级树展开结构

说明

• 先根据数据渲染,然后再实现事件

渲染

• 在项目中,经常会给出一个深度不确定的数组,数字结构如下:

data = [
    {
   name: 'a', child:[{
   name: 'a1'},{
   name: 'a2', child: [{
   name:'a21'}]}]},
    {
   name: 'b'}
]

• 要求将数组渲染成对应的目录结构, 结构如下:

<ul>
    <li>
        a
        <ul>
            <li>a1</li>
            <li>a2
                <ul>
                    <li>a21</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>b</li>
</ul>

• 思路,先对数组中的第一级数据显示出来

$(function(){
   
    var str = '<ul>';
    for(var i=0; i< data.length; i++){
   
        str += `<li>${
     data[i].name}</li>`
    }
    str += '</ul>';
    $('.tree').html(str)
})

此时页面结构如下:

• 下面尝试将页面结构渲染成如下

<div class="tree">
	<ul>
		<li>
			a
			<ul>
				<li