切换功能的更好方法

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');
});

此方法将删除任何已应用到元素的类，并添加任何未应用的元素。

切换功能的更好方法

Better way to toggle functions

jquery

function

toggle