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;
}