利用jQuery渲染二级菜单

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() }
          })
    }
})