Layui菜单栏layui-nav-child点击不显示问题

这种问题一般是js引入顺序问题，我的问题就是js引入顺序不对。

我的jsp页面如下（错误的）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 拼装当前网页的相对路径
request.getContextPath():解决相对路径的问题，可返回站点的根路径
request.getScheme():这是获取协议,如常用的http协议
request.getServerName():服务器的名字
request.getServerPort():这是服务器端口号
 -->

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	response.setHeader("Pragma", "no-cache");
	response.addHeader("Cache-Control", "must-revalidate");
	response.addHeader("Cache-Control", "no-cache");
	response.addHeader("Cache-Control", "no-store");
	response.setDateHeader("Expires", 0);
%>
<title>Insert title here</title>
</head>
<!--js全局变量，权限管理start-->
<script type='text/javascript'>
	var basePath = '<%=basePath%>';
		(function(){ 
		    USER_SESSION = <%=session.getAttribute("BACKEND_SESSION_USER_KEY")%>;
		    BACKEND_SESSION_USER_AREA_KEY = <%=session.getAttribute("BACKEND_SESSION_USER_AREA_KEY")%>;
		    if(USER_SESSION == null){
		        window.location.href = "<%=basePath%>" + "resources/backendLogin.jsp";
		}
	})();

	var isDeleteState = '0';

	var login_Account = {
		loginAccount : USER_SESSION.username
	};

	var isYes = 'No';

	var MyDataStatic;

	var textData;
</script>
<!--js全局变量，权限管理end-->

<link rel="stylesheet" href="../resources/layui/css/layui.css">
<script src="../resources/layui/layui.js"></script>

<!-- <script type="text/javascript" src="backend.js"></script> -->
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- 头部区域（可配合layui已有的水平导航）引入 -->
		<jsp:include page="../resources/head/head.jsp"></jsp:include>
		
		<!-- 引入菜单栏 -->
		<jsp:include page="../resources/superAdminMenu/superAdmin.jsp"></jsp:include>
		
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">内容主体区域</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			
		</div>
	</div>
	<script src="../resources/layui/lay/modules/element.js"></script>
	<script src="../resources/layui/lay/modules/layer.js"></script>
	<script src="../resources/layui/lay/modules/jquery.js"></script>
	<script src="../resources/layui/layui.all.js"></script>
	<script src="../resources/layui/jquery.min.js"></script>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
	</script>

</body>
</html>

这个<script src="../resources/layui/layui.all.js"></script>不要放在body里面。

正确的如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 拼装当前网页的相对路径
request.getContextPath():解决相对路径的问题，可返回站点的根路径
request.getScheme():这是获取协议,如常用的http协议
request.getServerName():服务器的名字
request.getServerPort():这是服务器端口号
 -->

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	response.setHeader("Pragma", "no-cache");
	response.addHeader("Cache-Control", "must-revalidate");
	response.addHeader("Cache-Control", "no-cache");
	response.addHeader("Cache-Control", "no-store");
	response.setDateHeader("Expires", 0);
%>
<title>Insert title here</title>
</head>
<!--js全局变量，权限管理start-->
<script type='text/javascript'>
	var basePath = '<%=basePath%>';
		(function(){ 
		    USER_SESSION = <%=session.getAttribute("BACKEND_SESSION_USER_KEY")%>;
		    BACKEND_SESSION_USER_AREA_KEY = <%=session.getAttribute("BACKEND_SESSION_USER_AREA_KEY")%>;
		    if(USER_SESSION == null){
		        window.location.href = "<%=basePath%>" + "resources/backendLogin.jsp";
		}
	})();

	var isDeleteState = '0';

	var login_Account = {
		loginAccount : USER_SESSION.username
	};

	var isYes = 'No';

	var MyDataStatic;

	var textData;
</script>
<!--js全局变量，权限管理end-->

<link rel="stylesheet" href="../resources/layui/css/layui.css">
<script src="../resources/layui/layui.js"></script>
<script src="../resources/layui/layui.all.js"></script>
<!-- <script type="text/javascript" src="backend.js"></script> -->
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- 头部区域（可配合layui已有的水平导航）引入 -->
		<jsp:include page="../resources/head/head.jsp"></jsp:include>
		
		<!-- 引入菜单栏 -->
		<jsp:include page="../resources/superAdminMenu/superAdmin.jsp"></jsp:include>
		
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">内容主体区域</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			
		</div>
	</div>
	<script src="../resources/layui/lay/modules/element.js"></script>
	<script src="../resources/layui/lay/modules/layer.js"></script>
	<script src="../resources/layui/lay/modules/jquery.js"></script>
	<script src="../resources/layui/jquery.min.js"></script>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
	</script>

</body>
</html>

错误位置截图：

正确位置截图：

总结：layui包引入的顺序一定要正确，不然就会出现点击layui-nav-child失效问题。

fjzzpljj

发布了19 篇原创文章 · 获赞 2 · 访问量 6358

私信关注

Layui菜单栏layui-nav-child点击不显示问题

猜你喜欢