JavaScriptfor循环的树形菜单栏·

简介: JavaScriptfor循环的树形菜单栏·

在此声明一下嗷兄弟闷儿!我没写样式纯粹是console.log()打印控制面板的!

全局声明一个data;

let data;'

然后去获取到json的假数据

let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/menu.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        data = JSON.parse(xhr.responseText);
        // 调用展示商品的函数
        console.log(data);
        fun(data);
    }
};

然后function一个变量进行调用!加上下面的自己去看吧,家人们

function fun(data) {
    let arr = [];
 
    for (let i in data) {
        if (data[i].pid == 0) {
            data[i].children = []; // 初始化 children 数组
            for (let j in data) {
                if (data[j].pid == data[i].id) { // 找到当前节点的子节点
                    data[i].children.push(data[j]); // 将子节点添加到 children 数组中
                }
                data[j].childrens = [];
                for (let k in data) {
                    if (data[k].pid == data[j].id) {
                        data[j].childrens.push(data[k]);
                    }
                }
            }
            arr.push(data[i]); // 将构建好的根节点添加到 arr 中
        }
    }
 
    console.log(arr);
}
相关文章
|
9天前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
JavaScript 前端开发
JavaScript 使用原生js和jquery两种方法,实现tab栏切换
JavaScript 使用原生js和jquery两种方法,实现tab栏切换
191 0
|
JavaScript 前端开发
JavaScript基础变色选项卡
JavaScript基础变色选项卡
|
Web App开发 JavaScript 前端开发
不使用JavaScript也能直接修改样式,这一波你学废了吗?
不使用 JavaScript 也能直接修改样式?听起来有点不可思议,但是接下来我就带你一起来看看这个神奇的效果是如何实现的。 先来看效果,建议在 Chrome 浏览器中查看
104 0
|
JavaScript 前端开发
javascript实现单按钮显示隐藏元素
javascript实现单按钮显示隐藏元素
109 4
javascript实现单按钮显示隐藏元素
|
JavaScript 前端开发 Java
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
378 0
javascript原生实现二级联动下拉菜单
|
JavaScript 前端开发 索引
JavaScript轮播图学习和例题
轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面。下图截自京东的购物页面。
266 0
JavaScript轮播图学习和例题
|
JavaScript 前端开发
万文篇章带你搞懂JavaScript——如何使用js实现模态框拖动,放大镜和侧边栏固定效果
万文篇章带你搞懂JavaScript——如何使用js实现模态框拖动,放大镜和侧边栏固定效果
206 0
万文篇章带你搞懂JavaScript——如何使用js实现模态框拖动,放大镜和侧边栏固定效果
|
JSON JavaScript 前端开发
JavaScript基础插曲—获取标签,插入元素,操作样式
JavaScript基础插曲—获取标签,插入元素,操作样式
194 0
JavaScript基础插曲—获取标签,插入元素,操作样式
|
前端开发 JavaScript
一段简单的JavaScript代码,实现在同一网页输出多个图标的功能
一段简单的JavaScript代码,实现在同一网页输出多个图标的功能
293 0
一段简单的JavaScript代码,实现在同一网页输出多个图标的功能