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

[
  {
    "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"
      }
    ]
  }
]

<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" onclick="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>

<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>