左侧菜单实现
默认html
<div class="layui-side layui-bg-black h-slide">
???????????<div class="layui-side-scroll">
???????????????<ul class="layui-nav layui-nav-tree" lay-filter="managerTreeNav" id="managerTreeNav">
???????????????????<li class="layui-nav-item layui-nav-itemed">
???????????????????????<a href="javascript:;">默认展开</a>
???????????????????????<dl class="layui-nav-child">
???????????????????????????<dd><a href="javascript:;" id="xx1">选项1</a></dd>
???????????????????????????<dd><a href="javascript:;">选项2</a></dd>
???????????????????????????<dd><a href="">跳转</a></dd>
???????????????????????</dl>
???????????????????</li>
???????????????????<li class="layui-nav-item">
???????????????????????<a href="javascript:;" id="jjfa">解决方案</a>
???????????????????????<dl class="layui-nav-child">
???????????????????????????<dd><a href="">移动模块</a></dd>
???????????????????????????<dd><a href="">后台模版</a></dd>
???????????????????????????<dd><a href="">电商平台</a></dd>
???????????????????????</dl>
???????????????????</li>
???????????????????<li class="layui-nav-item"><a href="">产品</a></li>
???????????????????<li class="layui-nav-item"><a href="">大数据</a></li>
???????????????</ul>
???????????</div>
???????</div>
根据这个格式编辑（script）
//首次登录执行获取一级菜单
???????????$.ajax({
???????????????url: "/Home/GetTree?id=0",
???????????????type: "Post",
???????????????timeout: 5000,
???????????????async: false,
???????????????dataType: "json",
???????????????success: function (data) {
???????????????????if (data != null && data != undefined) {
???????????????????????var leftTreeBox = $("#managerTreeNav").empty();
???????????????????????var treeHtml = "";
???????????????????????for (var i = 0; i < data.length; i++) {
???????????????????????????treeHtml += "<li class=\"layui-nav-item\"><a href=#" + data[i].value + " data-hasChildren=" + data[i].hasChildren + " id=" + data[i].id + "><i class=\"" + data[i].Icon + "\"></i>" + data[i].text + "</a><dl class=\"layui-nav-child\"><dd></dd></dl></li>"
???????????????????????}
???????????????????????leftTreeBox.append(treeHtml);
???????????????????????//初始化渲染全部的元素
???????????????????????element.init();
???????????????????}
???????????????????else {
???????????????????????layer.load(1, { offset: [‘100px‘, ‘80px‘] });//当菜单加载失败时使用
???????????????????}
???????????????},
???????????????error: function (error) {
???????????????????console.log(error);
???????????????}
???????????})
//导航菜单监听
???????????element.on(‘nav(managerTreeNav)‘, function (elem) {
//获取二级菜单
???????????????$.ajax({
???????????????????url: "/Home/GetTree?id=" + encodeURI(id),
???????????????????type: "Post",
???????????????????timeout: 5000,
???????????????????async: false,
???????????????????dataType: "json",
???????????????????success: function (data) {
???????????????????????var treeHtml = "";
???????????????????????for (var i = 0; i < data.length; i++) {
???????????????????????????treeHtml += "<dd><a data-href=" + data[i].value + " data-hasChildren=" + data[i].hasChildren + " id=" + data[i].id + "><i class=\"" + data[i].Icon + "\"></i>" + data[i].text + "</a></dd>"
???????????????????????}
???????????????????????elem.parent().find("dl").empty().append(treeHtml);
???????????????????????element.init();
???????????????????},
???????????????????error: function (error) {
???????????????????????console.log(error);
???????????????????}
???????????????})
})
##使用layui的菜单必须加载element模块
.net mvc 框架实现后台管理系统 3
原文地址：https://www.cnblogs.com/newrohlzy/p/9973867.html