jQuery Collapse1.1.0折叠插件简单使用
本文实例为大家分享了jQueryCollapse1.1.0折叠插件的使用，供大家参考，具体内容如下
/*!
*jQuerycollapse-AWizardPlugin-http://www.cnblogs.com/yeyuansheng/
*------------------------------------------------------------------------------------
*
*@version1.1.0
*@since2017.08.28
*@author夜原生
*@documentationhttp://www.cnblogs.com/yeyuansheng/
*
*Usagewithdefaultvalues:
*------------------------------------------------------------------------------------
*{
*panel:'',//默认空为第一个标签
*content:'',//默认空为第二个标签
*active:'active',//点击样式
*shut:true,//展开的在次点击可闭合
*style:'y',//x,y，0上下左右滑动展开/无动作展开
*speed:200,//动作的速度
*event:"click",//动作
*class:'active',//item样式
*func:function(){},//增加事件
*open:''//默认打开
*}
*/
(function($){
varcollapse={
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){
varopts=$.extend({},$.fn.collapse.defaults,options);
if(opts.style=='x'&&options.shut=='undefined'){
opts.shut=false;
}
returnopts;
},
clickChange:function(obj,op){
varpanel=(op.panel=='')?$(obj).children(':first'):$(obj).find('>'+op.panel);
panel.on(op.event,function(){
varparent=$(this).parent();
varsub=(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(){
vart=$(this);
if(t.hasClass(op.active)){
varuls=(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){
varuls=(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){
varli=$(obj).children().eq(open[0]);
li.addClass(op.active);
varul=(op.content=='')?li.children().eq(1):li.find('>'+op.content);
ul.show();
ul.children().eq(open[1]).addClass(op.class);
}
}
$.fn.collapse=function(options){
varopts=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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。