<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery菜单</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">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript">
$(document).ready(function(){
//查找所有主菜单
//$(".main > a,.hmain > a").click(function(){
$(".main > a").click(function(){
//当前菜单已经展开,取消确事件
if($(this).css("background-image").indexOf("expanded.gif")>=0){
changeIcon($(this));//改变左边的图标
var ulNode = $(this).next("ul");
ulNode.slideToggle();
return;
}
//把其它展开的都关闭
$(".main >a ").each(function(index){
if($(this).css("background-image").indexOf("expanded.gif")>=0){
changeIcon($(this));
var ulNode = $(this).next("ul");
//slideUp():通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
ulNode.slideUp();
}
});
changeIcon($(this));//改变左边的图标
var ulNode = $(this).next("ul");
/*
if(ulNode.css("display")=="none"){
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}
*/
//JQuery动画效果
//ulNode.show("slow");//slow,normal,fast
//ulNode.hide(300);
//ulNode.toggle("slow");
//ulNode.slideDown("normal");
//ulNode.slideUp();
//slideToggle():通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
ulNode.slideToggle();
});
//hover:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
$(".hmain").hover(function(){
var liNode = $(this);
var aNode = liNode.children("a");
if(aNode.css("background-image").indexOf("collapsed.gif")>=0){
//延迟处理,防止用户不小心划动
timeoutid = setTimeout(function(){
changeIcon(aNode);
//slideDown():与slideUp()相反
liNode.children("ul").slideDown();
},300);
}
},function(){
clearTimeout(timeoutid);
var aNode = $(this).children("a");
if(aNode.css("background-image").indexOf("expanded.gif")>=0){
changeIcon(aNode);
$(this).children("ul").slideUp();
}
});
});
//改变当菜单项的background-image
function changeIcon(mainNode){
if(mainNode){//不为空
if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
mainNode.css("background-image","url(images/expanded.gif)");
}else{
mainNode.css("background-image","url(images/collapsed.gif)");
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
<li><a href="#">子菜单项13</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
<li><a href="#">子菜单项23</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
<li><a href="#">子菜单项33</a></li>
</ul>
</li>
</ul>
</div>
<br><br><br>
<hr width="80%">
<div>
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
<li><a href="#">子菜单项13</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
<li><a href="#">子菜单项23</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
<li><a href="#">子菜单项33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>