JavaScript+jQuery实现简单的动态菜单
1.jQuery:(使用时我们需要导入Jquery文件)
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
2.下面是我们的代码实现
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入css样式 -->
<link rel="stylesheet" type="text/css" href="css/Annm.css">
<!-- 导入jQuery文件 -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//jQuery方法
$(document).ready(function(){
//获取主菜单：公告管理。声明一个单击函数
$(".main > a").click(function(){
//获取主菜单下面的子菜单ul
var ulObject=$(this).next("ul");
//slideToggle通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
ulObject.slideToggle();
//调用使三角形变化的函数这里$(".main>a")也可以换成this即demo(this).
demo($(".main > a"));
});
});
function demo(mNode){
//判断是否是根节点
if(mNode){
if(mNode.css("background-image").indexOf("collapsed.gif")>=0){
//索引值大于等于0变换图片背景
mNode.css("background-image","url('image/images2/expanded.gif')");
}else{
mNode.css("background-image","url('image/images2/collapsed.gif')");
}
}
}
</script>
</head>
<body>
<ul>
<li class="main">
<a href="#">公告管理</a>
<ul>
<li><a href="#">增加</a></li>
<li><a href="#">删除</a></li>
<li><a href="#">修改</a></li>
<li><a href="#">查询</a></li>
</ul>
</li>
</ul>
</body>
</html>
3.css样式
body{
padding: 0px;
margin: 0px;
}
ul li{
list-style: none;
}
/*消除缩进*/
ul{
padding: 0px;
margin: 0px;
}
/*给主菜单添加背景图片*/
.main{
background-image: url("../image/images2/title.gif");
background-repeat: repeat-x;
width: 120px;
}
li{
background-color: #eeeeee;
}
a{
text-decoration: none;
padding-left: 20px;
display: inline-block;
width: 100px;
padding-top: 5px;
padding-bottom: 3px;
}
/*设置主菜单*/
.main a{
color: white;
background-image: url("../image/images2/collapsed.gif");
background-repeat: no-repeat;
background-position: 3px center;
}
/*设置子菜单*/
.main li a{
color: black;
background-image: none;
}
/*隐藏子菜单*/
.main ul{
display: none;
}
