JQuery应用三：菜单效果
<%@ 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>
menu.css内容如下：
ul,li {
/**
* disc：CSS1实心圆
* circle：CSS1空心圆
* square：CSS1实心方块
* decimal：CSS1阿拉伯数字
* none：CSS1不使用项目符号
**/
list-style-type: none;
}
ul {
/**
* 检索或设置对象四边的补丁边距。
* 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
* 如果只提供一个，将用于全部的四条边。
* 如果提供两个，第一个用于上－下，第二个用于左－右。
* 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
* 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
* 不允许负值。
**/
padding: 0px;
/**
* 检索或设置对象四边的外延边距。参数与padding一样
*/
margin: 0px;
}
.main,.hmain {
background-image: url(../images/title.gif);
/**
* background-repeat：设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
* repeat-x：背景图像在横向上平铺
* repeat-y：背景图像在纵向平铺
* repeat：背景图像在纵向和横向上平铺
* no-repeat：背景图像不平铺
**/
background-repeat: repeat-x;
width: 120px;
}
li{
background-color: #eeeeee;
}
a {
/**
* text-decoration：检索或设置对象中的文本的装饰。
* 有href特性的a，以及u，ins对象默认值为underline 。
* 对象strike，s，del，默认值是line-through。
* 没有文本的对象此属性不会作用。
* none：无装饰 blink：闪烁 underline：下划线 line-through：贯穿线 overline：上划线
**/
text-decoration: none;
/**
* padding-left：检索或设置对象左边的补丁边距。
*/
padding-left:20px;
/**
* display：设置或检索对象是否及如何显示。
* none: CSS1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
* inline-block：元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性
*/
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a,.hmain a {
color: white;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat;
/**
* 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
* 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
* 该属性定位不受对象的补丁属性(padding)设置影响。
**/
background-position: 3px center;
}
.main li a,.hmain li a {
color:black;
background-image: none;
}
.main ul,.hmain ul {
display: none;
}
.hmain {
/**
* float：该属性的值指出了对象是否及如何浮动
* none：对象不浮动 left：对象浮在左边 right：对象浮在右边
**/
float: left;
margin-right: 1px;
}