使用jQuery打造手风琴式的折叠效果

Js代码 
  1. var accordion = {  
  2.      init: function(){  
  3.            var $container = $('#accordion');  
  4.            $container.find('li:not(:first) .details').hide();  
  5.            $container.find('li:first').addClass('active');  
  6.            $container.on('click','li a',function(e){  
  7.                   e.preventDefault();  
  8.                   var $this = $(this).parents('li');  
  9.                   if($this.hasClass('active')){  
  10.                          if($('.details').is(':visible')) {  
  11.                                 $this.find('.details').slideUp();  
  12.                          } else {  
  13.                                 $this.find('.details').slideDown();  
  14.                          }  
  15.                   } else {  
  16.                          $container.find('li.active .details').slideUp();  
  17.                          $container.find('li').removeClass('active');  
  18.                          $this.addClass('active');  
  19.                          $this.find('.details').slideDown();  
  20.                   }  
  21.            });  
  22.      }  
  23. };  

相关推荐