jQuery 树型菜单完整代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>jQuery树形菜单</title><script src="./js/jquery-3.6.0.js"></script><style type="text/css">/* 初始化页面 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 设置背景页面 */body {width: 100%;min-height: 100vh;background-color: #029688;display: flex;justify-content: center;}/* 设置树形菜单宽度 */.tree {width: 60%;}/* 设置树形菜单标题 */.tree h1 {width: 100%;height: 60px;text-align: center;line-height: 60px;color: #F7F29B;font-family: "楷体";letter-spacing: 3px;}/* 设置标题下边的水平线 */.tree i{display: block;width: 100%;height: 1px;background-color: #D7DBDB;position: relative;}/* 设置标题水平线中心的菱形 */.tree i::before{content: "";width: 7px;height: 7px;transform: rotate(45deg);background-color: #D7DBDB;position: absolute;top: -3px;left: 50%;margin-left: -3.5px;}/* 设置树形菜单列表 */.tree-list{width: 100%;margin-top: 20px;}/* 设置列表缩进效果 */.tree-list div{width: 100%;padding-left: 40px;position: relative;display: none;}/* 设置列表名称 */.tree-list p{display: flex;justify-content: space-between;width: 100%;height: 40px;line-height: 40px;color: #F7FBFB;}/* 设置箭头图片 */.tree-list img{width: 14px;height: 14px;margin: 13px;transition: all 0.3s;}/* 设置箭头图片旋转效果 */.tree-list .active{transform: rotate(180deg);}/* 设置鼠标悬浮样式 */.tree-list p:hover{background-color: rgba(80, 220, 220, 0.2);}/* 设置列表分类水平线 */.tree-list>em{display: block;width: 100%;height: 2px;background-color: #D7DBDB;margin: 5px 0;}</style></head><body><div class="tree"><h1>数据分类</h1><i></i><div class="tree-list"></div></div><script type="text/javascript">// 设置变量用于存储拼接的标签字符串let content = "";// 请求本地 json 文件$.ajax({type:"GET",url:"./js/data.json",success:function(res){console.log(res);// 调用数据拼接函数render(res);// 将字符串输出到页面中$(".tree-list").html(content)}})// 数据拼接函数 将数据拼接成标签字符串function render(arr){for(let item of arr){if(item.child != undefined && item.child.length > 0){content += `<p onclick="cut(event)"><span onclick="skip()">${item.name}</span><img src="img/arrows.png" /></p><div>`;render(item.child);content += `</div><em></em>`;}else{content += `<p><span onclick="skip()">${item.name}</span></p><em></em>`;}}}// 列表显示隐藏事件function cut(e){e = e || window.event;let targets = e.target || e.srcElemet;$(targets).next("div").toggle(300);$(targets).find("img").toggleClass("active");}// 列表跳转事件function skip(){location.href = "./index.html";}</script></body>
</html>JSON 假数据文件：
[{"name":"一级菜单1","child":[{"name":"二级菜单1-1","child":[]},{"name":"二级菜单1-2","child":[{"name":"三级菜单1-2-1","child":[]},{"name":"三级菜单1-2-2","child":[]}]},{"name":"二级菜单1-3","child":[]},{"name":"二级菜单1-4","child":[]},{"name":"二级菜单1-5","child":[{"name":"三级菜单1-5-1","child":[]},{"name":"三级菜单1-5-2","child":[]}]}]},{"name":"一级菜单2","child":[{"name":"二级菜单2-1","child":[{"name":"三级菜单2-1-1","child":[]},{"name":"三级菜单2-1-2","child":[]}]},{"name":"二级菜单2-2","child":[]},{"name":"二级菜单2-3","child":[]}]},{"name":"一级菜单3","child":[]},{"name":"一级菜单4","child":[{"name":"二级菜单4-1","child":[]},{"name":"二级菜单4-2","child":[{"name":"三级菜单4-2-1","child":[]},{"name":"三级菜单4-2-2","child":[]},{"name":"三级菜单4-2-3","child":[]}]},{"name":"二级菜单4-3","child":[]},{"name":"二级菜单4-4","child":[]},{"name":"二级菜单4-5","child":[]}]},{"name":"一级菜单5","child":[]},{"name":"一级菜单6","child":[{"name":"二级菜单6-1","child":[{"name":"三级菜单6-1-1","child":[]},{"name":"三级菜单6-1-2","child":[]},{"name":"三级菜单6-1-3","child":[]}]},{"name":"二级菜单6-2","child":[]},{"name":"二级菜单6-3","child":[]}]},{"name":"一级菜单7","child":[{"name":"二级菜单7-1","child":[]},{"name":"二级菜单7-2","child":[]}]},{"name":"一级菜单8","child":[]},{"name":"一级菜单9","child":[]}
]原创作者：吴小糖
创作时间：2023.11.7
