第30款插件:第25款插件：jquery.accordion.js 纵向手风琴效果插件

描述：这款手风琴效果适用于折叠的菜单，方便使用！用这款插件制作极其方便，只需要定义很少的参数，便可制作出纵向手风琴效果！
图片展示：


兼容浏览器： IE6+/Firefox/Google Chrome
官方链接： 暂无
JS下载： http://ijquery.360sites.cn/js/jquery.accordion.js
预览： http://ijquery.360sites.cn/demo/accordion
打包下载： http://ijquery.360sites.cn/demo/accordion/accordion.zip
参数说明： 

JS引用代码：特别注意，这里需要引入demensions.js这个js

1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
   
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.dimensions.js"></script>
   
3. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.accordion.js"></script>
   
4. <script type="text/javascript">
   
5.         $().ready(function(){
   
6.                 $('.basic').accordion({
   
7.                         event: 'mouseover'
   
8.                 });
   
9.         });
   
10. </script>

复制代码

HTML代码：

1. <div class="basic" style="margin:0 auto;margin-top:50px;" >
   
2.         <a>菜单一:</a>
   
3.         <div>
   
4.                 <p>
   
5.                         You've seen it coming!
   
6. 
   
7.                         Buy now and get nothing for free!
   
8. 
   
9.                         Well, at least no free beer. Perhaps a bear,
   
10. 
    
11.                         if you can afford it.
    
12.                 </p>
    
13.         </div>
    
14.         <a>菜单二:</a>
    
15.         <div>
    
16.                 <p>
    
17.                         your bear, you have to admit it!
    
18. 
    
19.                         No, we aren't selling bears.
    
20.                 </p>
    
21.         </div>
    
22.         <a>菜单三:</a>
    
23.         <div>
    
24.                 <p>
    
25.                         get two for three beer.
    
26.                 </p>
    
27.                 <p>
    
28.                         And now, for something completely different.
    
29. 
    
30.                         And now, for something completely different.
    
31. 
    
32.                         And now, for something completely different.
    
33. 
    
34.                         And now, for something completely different.
    
35. 
    
36.                         And now, for something completely different.
    
37. 
    
38.                         And now, for something completely different.
    
39. 
    
40.                         And now, for something completely different.
    
41. 
    
42.                         And now, for something completely different.
    
43. 
    
44.                         Period.
    
45.                 </p>
    
46.         </div>
    
47. </div>

复制代码

CSS代码： 这里需要两张图片，就是鼠标经过时的两张图片，在这里就不上传了，自己随便制作两个高29px的图片即可！

1. <link rel="stylesheet" href="demo.css" />

复制代码

即：

1. .basic  {
   
2.         width: 260px;
   
3.         font-family: verdana;
   
4.         border: 1px solid black;
   
5. }
   
6. .basic div {
   
7.         background-color: #eee;
   
8. }
   
9. 
   
10. .basic p {
    
11.         margin-bottom : 10px;
    
12.         border: none;
    
13.         text-decoration: none;
    
14.         font-weight: bold;
    
15.         font-size: 10px;
    
16.         margin: 0px;
    
17.         padding: 10px;
    
18. }
    
19. .basic a {
    
20.         cursor:pointer;
    
21.         display:block;
    
22.         padding:5px;
    
23.         margin-top: 0;
    
24.         text-decoration: none;
    
25.         font-weight: bold;
    
26.         font-size: 12px;
    
27.         color: black;
    
28.         background-color: #00a0c6;
    
29.         border-top: 1px solid #FFFFFF;
    
30.         border-bottom: 1px solid #999;
    
31.         
    
32.         background-image: url("AccordionTab0.gif");
    
33. }
    
34. .basic a:hover {
    
35.         background-color: white;
    
36.         background-image: url("AccordionTab2.gif");
    
37. }
    
38. .basic a.selected {
    
39.         color: black;
    
40.         background-color: #80cfe2;
    
41.         background-image: url("AccordionTab2.gif");
    
42. }

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=30