layui 动态加载菜单栏

最新推荐文章于 2024-04-22 13:04:56 发布

misolamiso

最新推荐文章于 2024-04-22 13:04:56 发布

阅读量2.5k

点赞数

分类专栏： html 文章标签： layui html

本文链接：https://blog.csdn.net/Grandaunt/article/details/114916931

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

layui 动态加载菜单栏

问题：由于动态生成的左侧菜单栏，下拉总是不显示所以研究了一下，初步判断是由于动态生成后没有重新加载js。

注意事项：1.除了引入layui.js，还引入layui.all.js试一下
2.加载elem模块，在动态生成侧边栏后， layui.element.init();重新加载一下。

index.js
 // 加载菜单
$(function () {
    RequestAuthorizeData("GET", "/GetMenuList" , "", function (data) {
        //成功;
        if (data.status == 200) {
            if (data.result) {
                $("#LAY-system-side-menu").html(data.data);
            } else {
                $("#LAY-system-side-menu").html(data.data);
            }
			 layui.element.init(); //最重要的一句	                
        }
        else {
            showBox(data.msg);
        }
        
    }, function (data) {
        //失败
        showBox(data.msg);
    });
})

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="./layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="./layuiadmin/style/admin.css" media="all">
		<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
	</head>
	
	<body class="layui-layout-body">
				<!-- 侧边菜单 -->
				<div class="layui-side layui-side-menu">
					<div class="layui-side-scroll">
						<div class="layui-logo" lay-href="/home/console/">
							<span><strong>""</strong></span>
						</div>

						<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
							lay-filter="layadmin-system-side-menu">
							
						</ul>
			</div>
		</div>

		<script src="./js/jquery-3.3.1.min.js"></script>
		<script src="./layuiadmin/layui/layui.js"></script>
		<script src="js/common.js"></script>
		<script src="js/index.js"></script>
		<script src="./layuiadmin/layui/layui.all.js"></script>
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
	});
			
		</script>
	</body>
</html>

misolamiso

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
layui 动态加载菜单栏

layui 动态加载菜单栏问题：由于动态生成的左侧菜单栏，下拉总是不显示所以研究了一下，初步判断是由于动态生成后没有重新加载js。注意事项：1.除了引入layui.js，还引入layui.all.js试一下2.加载elem模块，在动态生成侧边栏后， layui.element.init();重新加载一下。index.js // 加载菜单$(function () { RequestAuthorizeData("GET", "/GetMenuList" , "", function (
复制链接

扫一扫