阅读量:0
这里就不多叨叨啦！只是换了种写法
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 = `<div class="tree_wrap">`; for (let i = 0; i < data.length; i++) { if (data[i].children.length > 0) { str += `<div class="tree_flex"> <img src="${data[i].icon}" alt="" class="con">${data[i].name} <span><img src="./img/wode.png" alt="" class="cons"></span> </div> <div style="display:none">`; str += rendertree(data[i].children); str += `</div>`; } else { str += `<div class="tree_left"> <img src="${data[i].icon}" alt="" class="con">${data[i].name} </div>`; } } str += `</div>`; $('.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'); } }); 附带淡入淡出效果哟家人们
