layui 侧边导航栏动态展示后台返回的目录、多层目录

原创于 2021-12-28 14:28:09 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

jQuery 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何根据接口返回的数据动态构建一个多级左侧菜单。它遍历后台提供的数据，为每个父级菜单和子菜单创建HTML元素，并设置相应的属性和样式。最终将生成的菜单插入到页面的#leftnav元素中，同时确保首次加载时高亮显示第一个菜单项。

废话不多说，直接上代码

window.leftMenu = ‘’

var res = 接口返回的那些屌毛数据

window.leftMenu += ’

’
if (res.content.length > 0) {
for (var i = 0; i < res.content.length; i++) { //循环后台拿到的数据
window.leftMenu += “
”
window.leftMenu += “” + res.content[i].name + “”
window.leftMenu += “
”
if (res.content[i].childMenu.length > 0) {
for (var j = 0; j < res.content[i].childMenu.length; j++) { //循环父级下的子菜单
window.leftMenu += “
”
window.leftMenu += “<a href=“javascript:;” class=“showMain” lay-href=” + res.content[i].childMenu[j].href + “>” + res.content[i].childMenu[j].name + “”
window.leftMenu += “
”
}
}
window.leftMenu += “
”
window.leftMenu += “
”
}
}
window.leftMenu += “

”
// }
// })
$("#leftnav").html(window.leftMenu)
$("#leftnav").find(“ul li”).eq(0).addClass(“layui-nav-itemed”) // 增加第一次刷新进入页面时自动点击的页面点击
$("#leftnav").find(“ul li”).eq(0).find(" dd").addClass(“layui-this”) // 增加点击效果，

结束