jquery会员管理折叠菜单

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="LTR" lang="zh"> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<title>jquery会员管理折叠菜单</title> 
<script type="text/javascript" src="js_date/js/jquery.js"></script> 
<style> 
body{margin:0; padding:0; font-size:12px;} 
div, form, ul, dl, dt, dd, ol, li { margin: 0 auto; padding:0; border:0; list-style:none;} 
h1,h2,h3,h4,h5,h6 {font-weight:normal;display:inline;font-size:100%;} 
.menu{width:185px;border-bottom:1px solid #58BAF9; } 
.menu .item{ width:183px; border-left:1px solid #58BAF9; border-right:1px solid #58BAF9; background:url(img/201108/mytours_dt_bg.gif) repeat-x;} 
.menu .item h4{ padding-left:10px; height:26px; background:url(img/201108/arrow_blue_up.gif) no-repeat 162px center; line-height:26px; color:#111; font-weight:bold; cursor:pointer;} 
.menu .item h4.off{ background-image:url(img/201108/arrow_blue_down.gif);} 
.menu ul{ margin-top:10px;} 
.menu ul li{height:24px;} 
.menu ul li a{ display:block; padding:4px 0 3px 10px; line-height:12px;} 
</style> 
</head> 
<body> 
<div class="menu"> 
<div class="item"> 
<h4>订单管理</h4> 
<ul> 
<li>订单查询</li> 
<li>我的电子票</li> 
<li>我的联络资料</li> 
<li>订单咨询</li> 
</ul> 
</div> 
<div class="item"> 
<h4>个人信息管理</h4> 
<ul> 
<li>基本信息</li> 
<li>上传头像</li> 
<li>修改密码</li> 
</ul> 
</div> 
<div class="item"> 
<h4>我的积分和优惠券</h4> 
<ul> 
<li>我的积分</li> 
<li>积分规则</li> 
<li>我已兑换的礼品</li> 
</ul> 
</div> 
<div class="item"> 
<h4>我的结伴同游</h4> 
<ul> 
<li>我发布的结伴同游</li> 
<li>我申请的结伴同游</li> 
<li>我回复的结伴同游</li> 
</ul> 
</div> 
<div class="item"> 
<h4 class="off">我的推荐</h4> 
<ul style="display:none;"> 
<li>销售联盟概要</li> 
<li>佣金账号信息</li> 
<li>推荐给朋友</li> 
</ul> 
</div> 
<div class="item"> 
<h4>电子邮件通知</h4> 
<ul> 
<li>订阅或取消电子报</li> 
<li>查看或更改商品通知书</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
jQuery(".item h4").click(function(){ 
if(jQuery(".item ul:eq("+jQuery(".item h4").index(this)+")").css("display")=="none"){ 
jQuery(this).removeClass("off"); 
jQuery(".item ul:eq("+jQuery(".item h4").index(this)+")").slideDown(); 
}else{ 
jQuery(this).addClass("off"); 
jQuery(".item ul:eq("+jQuery(".item h4").index(this)+")").slideUp(); 
} 
}); 
</script> 
</body> 
</html>
</td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

补充：网页特效,导航菜单