jQuery实用可展开、折叠的竖向手风琴菜单

查看效果

下载地址

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