这种问题一般是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失效问题。