树状菜单分析

树状菜单总结

首先先用ajax获取假数据

然后在获取假数据里面判断的时候添加一个函数,for循环遍历里面所有的数据,然后判断pid等于0的数据,然后添加到新创建的空数组里面

将添加好的数组作为下面创建函数的实参的值,用于渲染页面,然后for循环遍历数组里面所有的数据,判断里面是否有子集,若有就递归渲染子节点并且字符串拼接箭头,若没有则渲染当前节点

添加点击事件,判断点击父节点的时候将子节点显示出来,将箭头旋转180度,并且给箭头添加过渡时间

javascript 复制代码
$(document).ready(function () {
    let xhr = $.ajax({
        url: './js/tree.json', // 请求地址
        method: 'GET', // 请求方式
        dataType: 'json', // 响应数据类型
        success: function (response) {
            data = response; // 将返回的 JSON 数据存储在 data 变量中
            arr = show(data, 0, []); // 调用递归函数,从根节点开始构建树形结构
            console.log(arr); // 打印构建完成的树形数据结构
            rendertree(arr); // 调用渲染树的函数并传入树形数据
        }
    }); 
});

// 定义递归函数,用于构建树形结构
function show(data, pid, arr) {
    for (let i = 0; i < data.length; i++) {
        if (data[i].pid == pid) {
            data[i].children = show(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="picture">${data[i].name}
                    <span><img src="./img/ji.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="picture">${data[i].name}
                </div>`;
        }
    }
    str += `</div>`;
    $('.tree').html(str); // 将树形结构渲染到页面上的指定位置
    return str;
}

// 定义展开或折叠子节点的函数
$(document).on('click', '.tree_flex', function () {
    let children = $(this).next(); // 获取当前节点的下一个兄弟元素,即子节点容器
    $(this).find('.cons').css('transition', 'transform 1s'); // 设置箭头图标的过渡效果为1秒

    if (children.css('display') == 'block') {
        // 用show并实现添加动画效果
        children.hide(2000);
        $(this).find('.cons').css('transform', 'rotate(0deg)');
    } else {
        children.show(2000);
        $(this).find('.cons').css('transform', 'rotate(180deg)');
        $(this).find('.cons').css('transition', 'transform 1s');
    }
});
相关推荐
Mintopia3 分钟前
🧠 一文吃透 Next.js 中的 JWT vs Session:底层原理+幽默拆解指南
前端·javascript·全栈
前端开发爱好者7 分钟前
字节出手!「Vue Native」真的要来了!
前端·javascript·vue.js
前端开发爱好者11 分钟前
国产 Canvas 引擎!神器!
前端·javascript·vue.js
AnalogElectronic43 分钟前
vue3 实现贪吃蛇 电脑版01
javascript·vue.js·ecmascript
trsoliu44 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu1 小时前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
鹏多多1 小时前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge1 小时前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评1 小时前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
Dragon Wu1 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro