js（递归函数）实现树型菜单

效果图： 

先创建一个JSON文件

[
    {
        "name":"一级菜单1",
        "child":[
            {
                "name":"二级菜单1-1"
                
            },{
                "name":"二级菜单1-2",
                "child":[
                    {
                        "name":"三级菜单1-2-1"
                        
                    },{
                        "name":"三级菜单1-2-2"
                        
                    },{
                        "name":"三级菜单1-2-3"
                        
                    }
                ]
            },{
                "name":"二级菜单1-3"
                
            }
            
        ]
    },{
        "name":"一级菜单2",
        "child":[
            {
                "name":"二级菜单2-1"
                
            },{
                "name":"二级菜单2-2",
                "child":[
                    {
                        "name":"三级菜单2-2-1"
                        
                    },{
                        "name":"三级菜单2-2-2"
                        
                    },{
                        "name":"三级菜单2-2-3"
                        
                    }
                ]
            },{
                "name":"二级菜单2-3"
                
            }
            
        ]
    },{
        "name":"一级菜单3",
        "child":[
            {
                "name":"二级菜单3-1"
                
            },{
                "name":"二级菜单3-2",
                "child":[
                    {
                        "name":"三级菜单3-2-1"
                        
                    },{
                        "name":"三级菜单3-2-2"
                        
                    },{
                        "name":"三级菜单3-2-3"
                        
                    }
                ]
            },{
                "name":"二级菜单3-3"
                
            }
            
        ]
    },{
        "name":"一级菜单4",
        "child":[
            {
                "name":"二级菜单4-1"
                
            },{
                "name":"二级菜单4-2",
                "child":[
                    {
                        "name":"三级菜单4-2-1"
                        
                    },{
                        "name":"三级菜单4-2-2"
                        
                    },{
                        "name":"三级菜单4-2-3"
                        
                    }
                ]
            },{
                "name":"二级菜单4-3"
                
            }
            
        ]
    },{
        "name":"一级菜单5",
        "child":[
            {
                "name":"二级菜单5-1"
                
            },{
                "name":"二级菜单5-2",
                "child":[
                    {
                        "name":"三级菜单5-2-1"
                        
                    },{
                        "name":"三级菜单5-2-2"
                        
                    },{
                        "name":"三级菜单5-2-3"
                        
                    }
                ]
            },{
                "name":"二级菜单5-3"
                
            }
            
        ]
    }
]
'
运行运行
 js部分

<script>
            // ajax请求JSON文件
            let xhr = new XMLHttpRequest();
            // 创建 XMLHttpRequest 对象
            xhr.open('get', 'js/index.json', true);
            // 使用 open 方法指定要请求的地址、类型和方式。
            xhr.send();
            // 使用 send 方法发送请求，如果需要传参：
            // get 方式要将参数拼接到 URL 后边，参数间&分割。例：’index.php?name=张三&age=18’ 
            // post 方式可以将参数放到 send()里。例：send(‘name=张三&age=18’)
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态
                    let text = xhr.responseText;
                    // console.log(text);
                    let data = JSON.parse(text);
                    // 接收数据，通过 json 转换使用
                    console.log(data);
                    reders(data)
                }
            };
 
            let str = ""
            // 创建一个空变量
            
            // 渲染函数需要用到递归函数
            function reders(data) {
                for (let item of data) {
                    
                    if (item.child) {
                        str += `<p class="one" οnclick="but(this)">${item.name}<img src="./img/下拉.png" style="height: 20px;"></p>
                        <div style="display: none;" class="bill">`
                        reders(item.child)
                        str += `</div>`
                    } else {
                        str += `<p class="one">${item.name}</p>`
                    }
                }
                document.getElementsByClassName("text")[0].innerHTML = str
            }
 
            // 点击显示判断和隐藏
            function but(e) {
                let childItem = e.nextSibling.nextSibling
                if (childItem.style.display == "block") {
                    childItem.style.display = "none"
                } else {
                    childItem.style.display = "block"
                }
            }
                
        </script>

 html和css

<style>
            * {
                margin: 0;
                padding: 0;
            }
 
            body {
                background-color: #019588;
            }
 
            .text {
                width: 80%;
                height: 500px;
                margin-left: 10%;
                color: #ffffff;
            }

            em {
                background-color: #ffffff;
                height: 2px;
                display: block;
            }
 
            .one {
                margin-top: 2%;
            }
 
            .bill {
                margin-left: 5%;
            }
        </style>
 
<h3 style="text-align: center;">数据分类</h3>
        <i style="background-color: #ffffff; display: block; height: 1px;"></i>
        <div class="text">
            
        </div>