本文主要介绍了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);
相关推荐：
css属性border-collapse与border-spacing的区别详解
css 表格中的单元格边框重叠的border-collapse属性
css border-collapse的使用详解
以上就是jquery collapse1.1.0折叠插件使用方法介绍的详细内容。