1.本地写一个json文件 用来存放数据 模拟请求本地json数据
二级菜单的json数据格式如下:
[
{
"id":1,
"name":[
"手机","运营商","智能数码"
],
"list":[
{
"id":101,
"list_name":"三星"
},
{
"id":102,
"list_name":"努比亚"
}
]
},
{
"id":2,
"name":[
"厨卫大电","生活家电","厨具"
],
"list":[
{
"id":101,
"list_name":"油烟机"
},
{
"id":102,
"list_name":"热水器"
}
]
}
2.用jquery利用ajax获取本地的json数据
$.ajax({
url: '../lib/main.json',//本地json数据地址
dataType: 'json',
success: function (res) {//渲染一级菜单
console.log(res)
var str1 = '';
res.forEach(v => {
str1 += `
<li>
<a href="">${v.name[0]}</a>
<a href="">${v.name[1]}</a>
<a href="">${v.name[2]}</a>
</li>
`
})
$('.headerb>div>ul').html(str1)
.on({
mouseenter: () => $('.tab').stop().slideDown(),
mouseleave: () => $('.tab').stop().slideUp()
})
.children('li')
.on('mouseover',function(){//给li添加事件 并渲染二级菜单
var index = $(this).index();
var list = res[index].list;
var str2 ='';
list.forEach(v=>{
str2+=`
<li>${v.list_name}</li>
`
})
$(".tab>div>ul").html(str2)
})
$('.tab')
.on({ //给二级菜单添加事件
mouseover: function () { $(this).finish().show() },
mouseout: function () { $(this).finish().slideUp() }
})
}
})