这里就不多叨叨啦！只是换了种写法

let data; // 定义用于存储请求返回数据的变量 let arr = []; // 定义用于存储处理后的树形数据的数组  $(document).ready(function () {     let xhr = $.ajax({         url: './js/tree.json', // 请求地址         method: 'GET', // 请求方式         dataType: 'json', // 响应数据类型         success: function (response) {             data = response; // 将返回的 JSON 数据存储在 data 变量中             arr = tree_menue(data, 0, []); // 调用递归函数，从根节点开始构建树形结构             console.log(arr); // 打印构建完成的树形数据结构             rendertree(arr); // 调用渲染树的函数并传入树形数据         }     }); });  function tree_menue(data, pid, arr) {     for (let i = 0; i < data.length; i++) {         if (data[i].pid == pid) {             // 递归调用，构建当前节点的子节点数组             data[i].children = tree_menue(data, data[i].id, []);             // 将当前节点加入到父节点的 children 数组中             arr.push(data[i]);         }     }     return arr; }  // 渲染树形结构的函数 function inn(data, pid, arr) {     for (let i = 0; i < data.length; i++) {         if (data[i].pid == pid) {             data[i].children = inn(data, data[i].id, []);             arr.push(data[i]);         }     }     return arr; }  // 渲染树形结构的函数 function rendertree(data) {     let str = `
`;      for (let i = 0; i < data.length; i++) {         if (data[i].children.length > 0) {             str +=                 `
                     ${data[i].name}                                      
                 
`;              str += rendertree(data[i].children);              str += `
`;         } else {             str +=                 `
                     ${data[i].name}                 
`;         }     }      str += `
`;     $('.treemenu').html(str); // 将树形结构渲染到页面上的指定位置     return str; }  // 获取所有类名为 'tree_left' 的元素 进行添加点击事件 $(document).on('click', '.tree_flex', function () {     // 获取当前节点的下一个兄弟元素，即子节点容器     let children = $(this).next();     // 设置箭头图标的过渡效果为1秒     $(this).find('.cons').css('transition', 'transform 1s');     // 判断子节点容器的显示状态     if (children.css('display') == 'block') {         // 要是字节点是显示的，则隐藏它         // children.css('display', 'none');         children.hide(2000);         // 当不点击箭头的时候让箭头图标旋转角度为0度，折叠状态         $(this).find('.cons').css('transform', 'rotate(0deg)');     } else {         children.show(2000);         // 要是字节点是隐藏的，则显示它         // children.css('display', 'block');         // 当点击箭头后让箭头图标旋转角度为180度，展开状态         $(this).find('.cons').css('transform', 'rotate(180deg)');         // $(this).find('.cons').css('transition', 'transform 1s');     } }); 

附带淡入淡出效果哟家人们