重构双按钮(jQuery)

在开发的时候，我又遇到了一个类似天猫购物车的侧边栏，用户可以点击展开，或者点击收起，其实这个效果的原理和“收起正文”是一样的，这里可以通过jQuery来重构一下事件。

//html代码
        
    
            
        
                
            

            //给要点击的按钮加一个class，这里我们使用.fabu
            
                
                    发布列表
                
                
                            
            
                
            
                    
                
                
            
            
        
        
    
        
    
            
        
                           
            

                                 
            
                    
            
                        
                                            
                    合并到管理中心-我的素材                        
                                    
            
             
        
        
    

//整个大体结构主要使用绝对定位，给这个模块一个初始的定位。
//position:fixed;top:0;right:0;

//<%-- 右侧发布列表导航条点击效果 --%>
$('#change').bind('click', function (e) {    
    e.stopPropagation();   
    if ($(this).attr('class') == 'fabu') {        
        $('#youcelan').css('right', 0);        
        $('#end').css('backgroundColor', '#f01400');        
        $(this).removeClass('fabu');    
    } else {        
        $('#youcelan').css('right', '-255px');        
        $('#end').css('backgroundColor', '#3B3A49');        
        $(this).addClass('fabu');    
    }
});

可以看出，通过'.fabu'来判断点击时走的是if还是else，以改变一些简单的css样式来完成初步效果。

1.png

2.png

这样，可以完成初步的展开和收起的效果。