jquery插件anccordion

浏览数：33 / 时间：2015年06月09日

 1 (function(){
 2     $.fn.YAccordion=function(options){
 3     
 4         var settings={
 5             trigger:‘click‘,
 6             speed:300,
 7         };
 8         
 9         if(options)
10             $.extend(settings,options);
11         
12         return this.each(function(){
13             $("p",this).bind(settings.trigger,function(){
14                 $(this).next("ul").slideToggle(settings.speed).siblings("ul").hide();
15             });
16             $("ul",this).hide().first().show();
17         });
18     }
19 })();

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 <meta http-equiv="Content-Language" content="zh-CN"/>
 6 <script type="text/javascript">
 7 </script>
 8 <style type="text/css">
 9 p{cursor:pointer;}
10 </style>
11 </head>
12 <body>
13 <div class="accordion">
14     <p>第一栏</p>
15     <ul>
16         <li>aaaaaaaaa</li>
17         <li>aaaaaaaaa</li>
18         <li>aaaaaaaaa</li>
19     </ul>
20     <p>第二栏</p>
21     <ul>
22         <li>bbbbbbbbb</li>
23         <li>bbbbbbbbb</li>
24         <li>bbbbbbbbb</li>
25     </ul>
26     <p>第三栏</p>
27     <ul>
28         <li>ccccccccc</li>
29         <li>ccccccccc</li>
30         <li>ccccccccc</li>
31     </ul>
32 </div>
33 <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
34 <script src="jquery.yaccordion.js" type="text/javascript"></script>
35 <script type="text/javascript">
36     $(".accordion").YAccordion({speed:100});
37 </script>
38 </body>
39 </html>