jquery外掛程式anccordion

標籤：style   blog   http   io   color   ar   java   sp   div   

 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外掛程式anccordion