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,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,function(){
t.removeClass(op.active);
});
}
}
});
parent.addClass(op.active);
collapse._animate(sub,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,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,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);

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