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":[] } ]