jQuery 可展开、折叠的竖向手风琴菜单，还有的是横向排列的，这个要根据你的网页结构了。手风琴菜单有很多，也是大家都比较喜欢的一种，本代码兼容性比较好，效果图如上所示。当点击文字的时候，展开对应的条目，在不少大网站中都有应用。
前台部分代码
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴展开菜单</title>
<link href="style/a7.css" type="text/css" rel="stylesheet">
<script language="javascript">
<!--
i=40;
function scroll(a){
if(i){a1.scrollLeft+=5*a;i--;setTimeout("scroll("+a+")",10);}else i=40;
}
//-->
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').accordion({
autoheight: false,
active: false,//false为都折叠，要某个不折叠，只要设置index即可
header: '.head',//可以折叠的元素
navigation: true,
event: 'click',//折叠展开时的事件
fillSpace: false,
animated: 'bounceslide'//bounceslide,easeslide展开折叠时的动态效果，需要引入其他js文件（UI Effects Core）
});
});
</script> </head>
<body>
<div id="container">
<div class="pbd">
<div class="area01">
<div class="maincontent">
<h4>CodeFans.net欢迎您到来！</h4>
<div class="box01">
<img src="images/g1-img01.gif" />
</div>
<div class="box02">
<h4>广州网页制作<span>163css.com</span></h4>
</div>
<div class="box03">
<ul id="navigation">
<li><span class="head">广州网聚信息传播有限公司--www.163css.com</span>
<p>网聚重构为您提供专业的广州网页制作,CSS教程和JS特效大全,帮助企业实现标准的div+css页面及网页js特效。联系ＱＱ：410694255</p>
</li>
<li><span class="head">中国新浪 --www.sina.com</span>
<p>新浪， 中国最早最大的门户网站，新闻、科技、财经、体育、娱乐动态，尽在新浪。</p>
</li>
<li><span class="head">阿里西西--www.alixixi.com</span>
<p>服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。</p>
</li>
<li><span class="head">源码爱好者--www.codefans.net </span>
<p>源码爱好者（CodeFans.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴展开菜单</title>
<link href="style/a7.css" type="text/css" rel="stylesheet">
<script language="javascript">
<!--
i=40;
function scroll(a){
if(i){a1.scrollLeft+=5*a;i--;setTimeout("scroll("+a+")",10);}else i=40;
}
//-->
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').accordion({
autoheight: false,
active: false,//false为都折叠，要某个不折叠，只要设置index即可
header: '.head',//可以折叠的元素
navigation: true,
event: 'click',//折叠展开时的事件
fillSpace: false,
animated: 'bounceslide'//bounceslide,easeslide展开折叠时的动态效果，需要引入其他js文件（UI Effects Core）
});
});
</script> </head>
<body>
<div id="container">
<div class="pbd">
<div class="area01">
<div class="maincontent">
<h4>CodeFans.net欢迎您到来！</h4>
<div class="box01">
<img src="images/g1-img01.gif" />
</div>
<div class="box02">
<h4>广州网页制作<span>163css.com</span></h4>
</div>
<div class="box03">
<ul id="navigation">
<li><span class="head">广州网聚信息传播有限公司--www.163css.com</span>
<p>网聚重构为您提供专业的广州网页制作,CSS教程和JS特效大全,帮助企业实现标准的div+css页面及网页js特效。联系ＱＱ：410694255</p>
</li>
<li><span class="head">中国新浪 --www.sina.com</span>
<p>新浪， 中国最早最大的门户网站，新闻、科技、财经、体育、娱乐动态，尽在新浪。</p>
</li>
<li><span class="head">阿里西西--www.alixixi.com</span>
<p>服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。</p>
</li>
<li><span class="head">源码爱好者--www.codefans.net </span>
<p>源码爱好者（CodeFans.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>