jquery插件anccordion

 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>

 

你可能感兴趣的:(jquery插件)