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 假数据文件:
javascript">[
{
"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