JavaScript递归菜单栏

HTML就一个div大框架

html 复制代码
 <div class="treemenu">

    </div>

重中之重的JavaScript部分他来啦!

注释也很清楚哟家人们!

javascript 复制代码
let data;
let arr = [];
let cons;

let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/tree.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        data = JSON.parse(xhr.responseText);
        // 调用展示商品的函数
        // console.log(data);
        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, []);
                    // 将当前节点加入到父节点的 children 数组中
                    arr.push(data[i]);
                }
            }
            return arr;
        }
        arr = inn(data, 0, []);
        console.log(arr);
        rendertree(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 onclick="show(this)" class="tree_flex"> 
                    <img src="${data[i].icon}" alt="" class="con">${data[i].name} 
                    <span><img src="./img/jtt.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>`;    // 关闭树的容器
    document.getElementsByClassName('treemenu')[0].innerHTML = str; // 将整棵树渲染到页面上的指定位置
    return str; // 返回树的 HTML 字符串
}




// 获取所有类名为 'tree_left' 的元素集合
let tree_left = document.getElementsByClassName('tree_left');

// 定义展开或折叠子节点的函数
function show(obj) {
    let children = obj.nextElementSibling; // 获取当前节点的下一个兄弟元素,即子节点容器
    obj.querySelector('.cons').style.transition = "transform 1s"; // 设置箭头图标的过渡效果为1秒

    // 判断子节点容器的显示状态
    if (children.style.display == 'block') {
        // 如果子节点容器是显示的,则隐藏它
        children.style.display = 'none'; // 隐藏子节点容器
        obj.querySelector('.cons').style.transform = "rotate(0deg)"; // 将箭头图标旋转角度设为0度,折叠状态
    } else {
        // 如果子节点容器是隐藏的,则显示它
        children.style.display = 'block'; // 显示子节点容器
        obj.querySelector('.cons').style.transform = "rotate(180deg)"; // 将箭头图标旋转角度设为180度,展开状态
        obj.querySelector('.cons').style.transition = "transform 1s"; // 设置箭头图标的过渡效果为1秒
    }
}

CSS样式包含了彩色小背景!

css 复制代码
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    font-family: Arial, sans-serif;
    user-select: none;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.treemenu {
    width: 30%;
    height: 700px;
    font-weight: 700;


}



.con {
    width: 15px;
    height: 15px;
    float: left;
    margin-top: 7px;
}


.tree_wrap {
    margin-left: 20px;
    line-height: 30px;
}

.tree_wrap :hover {
color: blue;
}



.cons {
    width: 15px;
    height: 15px;
    margin-left: 2%;
    margin-top: 7px;
}

样式图:

想要假数据的私我

相关推荐
没有bug.的程序员3 分钟前
金融支付分布式架构实战:从理论到生产级实现
java·分布式·微服务·金融·架构·分布式调度系统
00后程序员张3 分钟前
Jenkins Pipeline post指令详解
java·开发语言
程序员阿达10 分钟前
开题报告之基于SpringBoot框架的路面故障信息上报系统设计与实现
java·spring boot·后端
~无忧花开~13 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D20 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
哞哞不熬夜22 分钟前
JavaEE--SpringIoC
java·开发语言·spring boot·spring·java-ee·maven
滑水滑成滑头23 分钟前
**点云处理:发散创新,探索前沿技术**随着科技的飞速发展,点云处理技术在计算机视觉、自动驾驶、虚拟现实等领域的应用愈发广
java·python·科技·计算机视觉·自动驾驶
吴鹰飞侠29 分钟前
AJAX的学习
前端·学习·ajax
千里马-horse32 分钟前
fastddsgen.jar 简介
java·jar·fast dds·fastddsgen
TT哇32 分钟前
【Maven】Maven设置国内源
java·maven