<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="jquery.js"></script>
</head>
<style>
ol,dl,ul{margin: 0;}
ul li{
list-style: none;
}
.menu{
width: 600px;
background: #fff;
margin: auto;
box-shadow: 0 10px 25px rgba(0,0,0,.3);
height: 500px;
}
.menu div{
}
.menu div li{
width: 150px;
text-align: center;
margin: 15px 0;
}
.clear{
zoom: 1;
}
.clear:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.menu_con dd{
margin: 0;
}
.menu_con dd .item{
float: left;
width: 150px;
text-align: center;
}
.son_menu{
border: 1px solid red;
padding-inline-start: 0px;
background-color:#e8e7e7;
float: left;
display: none;
}
.son_menu li{
float: left;
margin: 0;
}
.item{
text-align: center;
cursor: pointer;
}
</style>
<body>
<div class="menu">
<div>
<dl class="menu_con">
<dt>广告/市场/媒体/艺术</dt>
<dd class="clear">
</dd>
</dl>
</ul>
</div>
</body>
<script>
$.ajax({
url:"./data.json",
type:"GET",
success:function(res){
var info=res.data;
console.log(info)
var f=0;//
var content=[];//先存放一级菜单，后面会把二级的也push进去
var childCon=[]//存放二级菜单
for(let i=0;i<info.length;i++){
//这里先push一级菜单
content.push('<div class="item" data-id="'+i+'">'+info[i].name+'</div>');
//获取二级菜单数据
var child=info[i].child;
// 循环二级菜单并且push到childCon中
childCon.push('<ul class="son_menu clear son_'+i+'">');
for(let k=0;k<child.length;k++){
childCon.push('<li data-id="'+child[k].id+'">'+child[k].name+'</li>');
}
childCon.push('</ul>');
//以下是控制二级菜单的个数，每次push进去4个，
//f==4 || i==info.length-1 这句代码的意思是，
//存在数组的长度不能整除以4，那么就出现了有一些二级菜单没有被push到一级菜单中，需要i== i==info.length-1来做判断
f++;
if(f==4 || i==info.length-1){
content.push(childCon);
f=0;
childCon=[];
}
}
$('.menu_con .clear').html(content.join("").replace(/,/g,''))
//点击显示隐藏
$('.item').click(function(event) {
var i=$(this).attr('data-id')
var t=$(this).siblings().find('.son_'+i+'');
if($(this).hasClass('curr')){
$('.son_'+i+'').slideUp('fast');
$(this).removeClass('curr')
}else{
$('.son_menu').slideUp('fast');
$('.son_'+i+'').slideDown('fast');
$(this).addClass('curr')
}
});
}
})
</script>
</html>json数据如下:
{
"state":0,
"data":[
{
"id":"0",
"name":"电影",
"child":[
{"id":"0","name":"电影二级菜单"},
{"id":"2","name":"电影二级菜单"},
{"id":"3","name":"电影二级菜单"},
{"id":"4","name":"电影二级菜单"},
{"id":"5","name":"电影二级菜单"},
{"id":"6","name":"电影二级菜单"},
{"id":"7","name":"电影二级菜单"}
]
},
{
"id":"1",
"name":"电影1",
"child":[
{"id":"0","name":"电影二级菜单1"},
{"id":"2","name":"电影二级菜单1"},
{"id":"3","name":"电影二级菜单1"},
{"id":"4","name":"电影二级菜单1"},
{"id":"5","name":"电影二级菜单1"},
{"id":"6","name":"电影二级菜单1"},
{"id":"7","name":"电影二级菜单1"}
]
},
{
"id":"2",
"name":"电影2",
"child":[
{"id":"0","name":"电影二级菜单2"},
{"id":"2","name":"电影二级菜单2"},
{"id":"3","name":"电影二级菜单2"},
{"id":"4","name":"电影二级菜单2"},
{"id":"5","name":"电影二级菜单2"},
{"id":"6","name":"电影二级菜单2"},
{"id":"7","name":"电影二级菜单2"}
]
},
{
"id":"3",
"name":"电影3",
"child":[
{"id":"0","name":"电影二级菜单3"},
{"id":"2","name":"电影二级菜单3"},
{"id":"3","name":"电影二级菜单3"},
{"id":"4","name":"电影二级菜单3"},
{"id":"5","name":"电影二级菜单3"},
{"id":"6","name":"电影二级菜单3"},
{"id":"7","name":"电影二级菜单3"}
]
},
{
"id":"4",
"name":"电影4",
"child":[
{"id":"0","name":"电影二级菜单4"},
{"id":"2","name":"电影二级菜单4"},
{"id":"3","name":"电影二级菜单4"},
{"id":"4","name":"电影二级菜单4"},
{"id":"5","name":"电影二级菜单4"},
{"id":"6","name":"电影二级菜单4"},
{"id":"7","name":"电影二级菜单4"}
]
},
{
"id":"5",
"name":"电影5",
"child":[
{"id":"0","name":"电影二级菜单5"},
{"id":"2","name":"电影二级菜单5"},
{"id":"3","name":"电影二级菜单5"},
{"id":"4","name":"电影二级菜单5"},
{"id":"5","name":"电影二级菜单5"},
{"id":"6","name":"电影二级菜单5"},
{"id":"7","name":"电影二级菜单5"}
]
},
{
"id":"6",
"name":"电影6",
"child":[
{"id":"0","name":"电影二级菜单6"},
{"id":"2","name":"电影二级菜单6"},
{"id":"3","name":"电影二级菜单6"},
{"id":"4","name":"电影二级菜单6"},
{"id":"5","name":"电影二级菜单6"},
{"id":"6","name":"电影二级菜单6"},
{"id":"7","name":"电影二级菜单6"}
]
},
{
"id":"7",
"name":"电影7",
"child":[
{"id":"0","name":"电影二级菜单7"},
{"id":"2","name":"电影二级菜单7"},
{"id":"3","name":"电影二级菜单7"},
{"id":"4","name":"电影二级菜单7"},
{"id":"5","name":"电影二级菜单7"},
{"id":"6","name":"电影二级菜单7"},
{"id":"7","name":"电影二级菜单7"}
]
},
{
"id":"8",
"name":"电影8",
"child":[
{"id":"0","name":"电影二级菜单8"},
{"id":"2","name":"电影二级菜单8"},
{"id":"3","name":"电影二级菜单8"},
{"id":"4","name":"电影二级菜单8"},
{"id":"5","name":"电影二级菜单8"},
{"id":"6","name":"电影二级菜单8"},
{"id":"7","name":"电影二级菜单8"}
]
},
{
"id":"9",
"name":"电影9",
"child":[
{"id":"0","name":"电影二级菜单9"},
{"id":"2","name":"电影二级菜单9"},
{"id":"3","name":"电影二级菜单9"},
{"id":"4","name":"电影二级菜单9"},
{"id":"5","name":"电影二级菜单9"},
{"id":"6","name":"电影二级菜单9"},
{"id":"7","name":"电影二级菜单9"}
]
},
{
"id":"9",
"name":"电影9",
"child":[
{"id":"0","name":"电影二级菜单9"},
{"id":"2","name":"电影二级菜单9"},
{"id":"3","name":"电影二级菜单9"},
{"id":"4","name":"电影二级菜单9"},
{"id":"5","name":"电影二级菜单9"},
{"id":"6","name":"电影二级菜单9"},
{"id":"7","name":"电影二级菜单9"}
]
},
{
"id":"9",
"name":"电影9",
"child":[
{"id":"0","name":"电影二级菜单9"},
{"id":"2","name":"电影二级菜单9"},
{"id":"3","name":"电影二级菜单9"},
{"id":"4","name":"电影二级菜单9"},
{"id":"5","name":"电影二级菜单9"},
{"id":"6","name":"电影二级菜单9"},
{"id":"7","name":"电影二级菜单9"}
]
},
{
"id":"9",
"name":"电影9",
"child":[
{"id":"0","name":"电影二级菜单9"},
{"id":"2","name":"电影二级菜单9"},
{"id":"3","name":"电影二级菜单9"},
{"id":"4","name":"电影二级菜单9"},
{"id":"5","name":"电影二级菜单9"},
{"id":"6","name":"电影二级菜单9"},
{"id":"7","name":"电影二级菜单9"}
]
},
{
"id":"9",
"name":"电影9",
"child":[
{"id":"0","name":"电影二级菜单9"},
{"id":"2","name":"电影二级菜单9"},
{"id":"3","name":"电影二级菜单9"},
{"id":"4","name":"电影二级菜单9"},
{"id":"5","name":"电影二级菜单9"},
{"id":"6","name":"电影二级菜单9"},
{"id":"7","name":"电影二级菜单9"}
]
}
]
}
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接