切换功能

Question

更好的办法现在我切换一个div来展开和折叠

我正在寻找一个更优雅的方式来创建这两个功能和切换他们。任何帮助，将不胜感激。

var collapseExpand = [collapse, expand]; 

    function collapse(){ 
     $('#document').removeClass('col-sm-5').addClass('col-sm-12 col-md-2 collapsed'); 
     $('#stages').removeClass('col-sm-7 collapsed').addClass('col-sm-12 col-md-10'); 
    } 

    function expand() { 
     $('#document').removeClass('col-sm-12 col-md-2').addClass('col-sm-5'); 
     $('#stages').removeClass('col-sm-12 col-md-10').addClass('col-sm-7'); 
    }  

    $('.col-expand').on('click', function(e){ 

     e.preventDefault(); 
     collapseExpand.reverse()[1](); 

    }); 

Answer 1

您可以在一个单一的功能，而不是使用toggleClass()：

$('.col-expand').on('click', function(e){ 
    e.preventDefault(); 
    $('#document').toggleClass('col-sm-12 col-md-2 col-sm-5 collapsed'); 
    $('#stages').toggleClass('col-sm-12 col-md-10 col-sm-7'); 
}); 

此方法将删除已应用于元素的任何类，并添加哪些不是。