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

/*!* jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/* ------------------------------------------------------------------------------------** @version 1.1.0* @since 2017.08.28* @author 夜原生* @documentation http://www.cnblogs.com/yeyuansheng/** Usage with default values:* ------------------------------------------------------------------------------------* {* panel: '',//默认空为第一个标签* content: '',//默认空为第二个标签* active: 'active',//点击样式* shut: true,//展开的在次点击可闭合* style: 'y',//x,y，0上下左右滑动展开/无动作展开* speed: 200,//动作的速度* event: "click",//动作* class: 'active',//item 样式* func: function(){},//增加事件* open:''//默认打开* }*/(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);