<html>
<head>
<title>伸缩的菜单，用jquery重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ed9f9f; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的css教程样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ed9f9f;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#ffffff;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myhide{ /* 隐藏子菜单 */
display:none;
}
/*
不再需要myshow样式
#navigation ul li ul.myshow{
display:block;
}
*/
-->
</style>
<script language="网页特效" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记（即<a>），并添加click()事件
$("li").find("ul").prev().click(function(){
//点击<a>时让它后面的兄弟（即<ul>）切换css样式
$(this).next().toggleclass("myhide");
});
});
/*
//替换原来的例题
function change(){
$(this).parent().find("ul").toggleclass("myhide");
//通过父元素li，找到兄弟元素ul
var oseconddiv = this.parentnode.getelementsbytagname("ul")[0];
//css交替更换来实现显、隐
if(oseconddiv.classname == "myhide")
oseconddiv.classname = "myshow";
else
oseconddiv.classname = "myhide";
}
window.onload = function(){
$("li").find("ul").prev().click(change);
/*var oul = document.getelementbyid("listul");
var ali = oul.childnodes; //子元素
var oa;
for(var i=0;i<ali.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(ali[i].tagname == "li" && ali[i].getelementsbytagname("ul").length){
oa = ali[i].firstchild; //找到超链接
oa.onclick = change; //动态添加点击函数
}
}
}*/
</script>
</head>
<body>
<div id="navigation">
<ul id="listul">
<li><a href="#">home</a></li>
<li><a href="#">news</a>
<ul class="myhide">
<li><a href="#">lastest news</a></li>
<li><a href="#">all news</a></li>
</ul>
</li>
<li><a href="#">sports</a>
<ul class="myhide">
<li><a href="#">basketball</a></li>
<li><a href="#">football</a></li>
<li><a href="#">volleyball</a></li>
</ul>
</li>
<li><a href="#">weather</a>
<ul class="myhide">
<li><a href="#">today's weather</a></li>
<li><a href="#">forecast</a></li>
</ul>
</li>
<li><a href="#">contact me</a></li>
</ul>
</div>
</body>
</html>
实例折叠菜单二
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#menu_1").click(function() {
$(this).css("background","url(../img/menu-fouce_03.jpg) no-repeat");
$(".main_2>a").css("background","none");
$(".main_2>ul").slideup("slow");
});
$(".main_2 ul").children(1).find("a").hover(function() {
$(this).css("background","url(img/sub-menu-fouce-bg_03.jpg) no-repeat");
},function(){
$(this).css("background","none");
});
$(".main_2>a").click(function() {
$("#menu_1").css("background","none")
var ulnode=$(this).next("ul");
$(".main_2>ul").slideup("slow");
ulnode.slidetoggle("slow");
});
$(".main_2>a").hover(function() {
$(this).css("background","url(img/menu-fouce-down_03.jpg) no-repeat");
},function() {
$(this).css("background","url(img/menu_bg_03.gif) no-repeat");
});
});
</script>
</head>
<body>
<ul>
<li class="main_1">
<a href="####" id="menu_1"><img src="img/b_1_03.png" width="22" height="17" align="middle"/>首页</a>
</li>
<li class="main_2">
<a href="####"><img src="img/b_2_03.png" width="18" height="20" align="middle"/>人员管理</a>
<ul>
<li><a href="####">售点管理</a></li>
<li><a href="####">申请数据管理</a></li>
<li><a href="####">售点访问频率设置</a></li>
<li><a href="####">片区业务员设定</a></li>
<li><a href="####">导入售点信息</a></li>
</ul>
</li>
<li class="main_2">
<a href="####"><img src="img/b_3_03.png" width="22" height="18" align="middle"/>报表统计</a>
<ul>
<li><a href="####">售点管理</a></li>
<li><a href="####">申请数据管理</a></li>
<li><a href="####">售点访问频率设置</a></li>
</ul>
</li>
jquery折叠菜单实例三
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<title>无标题文档</title>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.menu_list {
width: 150px;
}
.menu_head {
padding: 8px 10px;
cursor: pointer;
position: relative;
margin: 1px;
font-weight: bold;
background: #93cdff;
}
.menu_body {
display: none;
}
.menu_body a {
padding: 8px 0px;
display: block;
color: #006699;
background-color: #efefef;
padding-left: 10px;
font-weight: bold;
text-decoration: none;
}
.menu_body a:hover {
color: #7fb2f4;
background-color: #dfdfdf;
text-decoration: underline;
}
</style>
<script type="text/javascript">
$(function(){
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slidetoggle(300).siblings("div.menu_body").slideup("slow");
});
$("#firstpane p.menu_head").mouseo教程ver(function()
{
$(this).css({background:"#2286c6"});
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css({background:"#93cdff"});
});
});s
</script>
</head>
<body>
<div id="firstpane" class="menu_list">
<p class="menu_head">
菜单1
</p>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
<p class="menu_head">
菜单2
</p>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
<p class="menu_head">
菜单3
</p>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
<p class="menu_head">
菜单4
</p>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
</div>
</body>
</html>
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js