查看效果
下载地址
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 >
转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/21/1761668.html