jQuery 可展开、折叠的竖向手风琴菜单,还有的是横向排列的,这个要根据你的网页结构了。手风琴菜单有很多,也是大家都比较喜欢的一种,本代码兼容性比较好,效果图如上所示。当点击文字的时候,展开对应的条目,在不少大网站中都有应用。
前台部分代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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特效。联系QQ: 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特效。联系QQ: 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 >