首页>>Jquery文字>>jquery点击显示或隐藏内容,可以一次展开多个和点击按钮一次全部展开(2013-09-05)

jquery点击显示或隐藏内容,可以一次展开多个和点击按钮一次全部展开

jquery点击显示或隐藏内容,可以一次展开多个和点击按钮一次全部展开
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code复制内容到剪贴板
  1. <div id="page">  
  2.     
  3.     <div id="headingSection">  
  4.         <a class="button expand" href="#">展开</a>  
  5.     </div>  
  6.       
  7.     <div id="faqSection">  
  8.         <dl>  
  9.     <dt><span class="icon"></span>FAQ1</dt>  
  10.     <dd><a href="../../article_jquerywenzi_21.html">jquery点击显示或隐藏内容,可以一次展开多个和点击按钮一次全部展开</a></dd>  
  11.   
  12.     <dt><span class="icon"></span>2</dt>  
  13.     <dd>内容2</dd>  
  14. </dl>  
  15.   </div>  
  16.       
  17. </div>  

js代码

JavaScript Code复制内容到剪贴板
  1. $(document).ready(function(){  
  2.       
  3.         var dl = $('<dl>');  
  4.         $('#faqSection').append(dl);  
  5.           
  6.         $('dt').live('click',function(){  
  7.             var dd = $(this).next();  
  8.               
  9.             // If the title is clicked and the dd is not currently animated,  
  10.             // start an animation with the slideToggle() method.  
  11.               
  12.             if(!dd.is(':animated')){  
  13.                 dd.slideToggle();  
  14.                 $(this).toggleClass('opened');  
  15.             }  
  16.               
  17.         });  
  18.           
  19.         $('a.button').click(function(){  
  20.               
  21.             // To expand/collapse all of the FAQs simultaneously,  
  22.             // just trigger the click event on the DTs  
  23.               
  24.             if($(this).hasClass('collapse')){  
  25.                 $('dt.opened').click();  
  26.             }  
  27.             else $('dt:not(.opened)').click();  
  28.               
  29.             $(this).toggleClass('expand collapse');  
  30.               
  31.             return false;  
  32.         });  
  33.           
  34.       
  35. });  

 


原文地址:http://www.freejs.net/article_jquerywenzi_21.html