jQuery collapse插件1.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);