jQuery Collapse1.1.0折叠插件简单使用

本文实例为大家分享了jQuery Collapse1.1.0折叠插件的使用，供大家参考，具体内容如下

(function($) {
  var collapse = {
    version:'1.1.0',
    style:{
      slideRight: {
 width : "hide", 
 paddingLeft : "hide", 
 paddingRight : "hide", 
 marginLeft : "hide", 
 marginRight : "hide" 
      },
      slideLeft: {
 width : "show",
 paddingLeft : "show",
 paddingRight : "show",
 marginLeft : "show",
 marginRight : "show"
      },
      slideUp: {
 borderTopWidth: "hide",
 borderBottomWidth: "hide",
 paddingTop: "hide",
 paddingBottom: "hide",
 height: "hide"
      },
      slideDown: {
 borderTopWidth: "show",
 borderBottomWidth: "show",
 paddingTop: "show",
 paddingBottom: "show",
 height: "show"
      }
    },
    init:function(options){
      var opts = $.extend({}, $.fn.collapse.defaults, options);
      if(opts.style == 'x' && options.shut == 'undefined'){
 opts.shut = false;
      }
      return opts;
    },
    clickChange:function(obj,op){
      var panel = (op.panel == '')?$(obj).children(':first'):$(obj).find('> '+op.panel);
      panel.on(op.event,function(){ 
 var parent = $(this).parent();
 var sub = (op.content == '')?parent.children().eq(1):parent.find('> '+op.content);
 if($(sub).is(':visible')) {
   if(op.shut){
     collapse._animate(sub,op,0,function(){
parent.removeClass(op.class);
op.func();
     });
   }
 }else{
   parent.siblings().each(function(){
     var t = $(this);
     if(t.hasClass(op.active)){
var uls = (op.content == '')?t.children().eq(1):t.find('> '+op.content);
if(uls.length == 0){
  t.removeClass(op.active);
}else{
  collapse._animate(uls,op,0,function(){
    t.removeClass(op.active);
  });
} 
     }
   });
   parent.addClass(op.active);
   collapse._animate(sub,op,1,function(){
     op.func();
   });
 }
      });
    },
    itemChange:function(item,op){
      var uls = (op.content == '')?$(item).children().eq(1):$(item).children().find('> '+op.content);
      uls.children().on(op.event,function(){
 $(item).parent().children().each(function(){
   if(op.content == ''){
     $(this).children().eq(1).children().removeClass(op.class);
   }else{
     $(this).children().find('> '+op.content).children().removeClass(op.class);
   }
 });
 $(this).addClass(op.class);
      });
    },
    _animate:function(obj,op,bool,callback){
      if(op.style){
 if(bool){
   slide =(op.style == 'x')?collapse.style.slideLeft:collapse.style.slideDown;
 }else{
   slide =(op.style == 'x')?collapse.style.slideRight:collapse.style.slideUp;
 } 
 obj.animate(slide,op.speed,callback); 
      }else{
 (bool)?obj.show():obj.hide();//可以改用CLASS控制
      }
    },
    open:function(obj,op,open){
      var li = $(obj).children().eq(open[0]);
      li.addClass(op.active);
      var ul = (op.content == '')?li.children().eq(1):li.find('> '+op.content);
      ul.show();
      ul.children().eq(open[1]).addClass(op.class);
    }
  }
  $.fn.collapse = function(options){
    var opts = collapse.init(options);
    if(opts.open != '')collapse.open(this,opts,opts.open);
    $(this).children().each(function(){
      collapse.clickChange(this,opts);
      collapse.itemChange(this,opts);
    }); 
  }
  $.fn.collapse.defaults = { 
    panel: '',
    content: '',
    active: 'active',
    shut: true,
    style: 'y',
    speed: 200,
    event: "click",
    class: 'active',
    func: function(){},
    open:''
  }
})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。