jQuery collapse插件（原创）

网上找了很多collapse插件都不合心意，就自已写了个，修修改改写了几天了

每一个字母都是本人写的，主要是用于后台侧栏

 

 

/*!
 * jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/
 * ------------------------------------------------------------------------------------
 * 
 * @version        1.0.0
 * @since          2017.08.21
 * @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:''//默认打开
 * }
 * $('#left').collapse();
 * or
 * $(document).ready(function(){
 *    $("[selector]").each(function(){
 *       if($(this).attr('selector') == 'Collapse'){
 *           var data = eval('('+$(this).data('selector')+')');
 *           $(this).collapse(data);
 *       }
 *   });
 * })
 * 
 *<ul id='left' class="left-side-nav" selector="Collapse" data-selector='{panel:"a",open:[0,2]}'>
 * <li class="menu-list">
 *   <a href="javascript:void(0);">
 *     <i class="fa fa-laptop"></i>
 *     <span>一</span>
 *      <i class="fa fa-plus-square min"></i>
 *    </a>
 *    <ul>
 *        <li><a href="javascript:void(0);"> 1 </a></li>
 *        <li><a href="javascript:void(0);"> 2 </a></li>
 *        <li><a href="javascript:void(0);"> 3 </a></li>
 *        <li><a href="javascript:void(0);"> 4 </a></li>
 *    </ul>
 *  </li>
 *  <li class="menu-list">
 *    <a href="#">
 *      <i class="fa fa-laptop"></i>
 *      <span>二</span>
 *     <i class=""></i>
 *    </a>
 *    <ul>
 *        <li><a href="javascript:void(0);"> 1 </a></li>
 *        <li><a href="javascript:void(0);"> 2 </a></li>
 *        <li><a href="javascript:void(0);"> 3 </a></li>
 *        <li><a href="javascript:void(0);"> 4 </a></li>
 *    </ul>
 *  </li>
 *</ul>
 * 
 */
(function($) {
    var collapse = {
        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(panel,op){  
            panel.on(op.event,function(){                                             
                var parent,sub;
                parent = $(this).parent();
                if(op.content == ''){
                    sub = parent.children().eq(1);
                }else{
                    sub = 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)){
                            if(op.content == ''){
                                var uls = t.children().eq(1);
                            }else{
                                var uls = 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;
            if(op.content == ''){
                uls = $(item).children().eq(1);
            }else{
                uls = $(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);
            if(op.content == ''){
                var ul = li.children().eq(1);
            }else{
                var ul = 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);
        if(opts.panel == ''){
            $(this).children().each(function(){
                collapse.clickChange($(this).children(':first'),opts);
                collapse.itemChange(this,opts);
            });
        }else{
            collapse.clickChange($(this).find(opts.panel),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);