JavaScript 树状菜单栏jQuery写法

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

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');
    }
});

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