有没有一种更有效的方法来添加和删除这些CSS类与jQuery？

Question

我有以下脚本使用slidebars来显示和隐藏侧边菜单。

我需要将CSS类添加到另一个div中以将其组合在一起。但是看看我添加和删除类的方式，我觉得有更有效的方法吗？

function slidebarsStatus() {

  var windowWidth = $(window).width();
  breakpoint = 992; 

  if ( windowWidth > breakpoint ) {

    controller.open( 'site-menu' ); 
    $('.site-wrap').addClass('menu-active');


  }

  else {

    controller.close( 'site-menu' );
    $('.site-wrap').removeClass('menu-active');
    $('.site-wrap').addClass('menu-inactive');



  }

}

slidebarsStatus();
$(window).on( 'resize', slidebarsStatus );

Answer 1

将jQuery对象存储为变量：

var siteWrap = $('.site-wrap');

将您的方法链接到变量：

siteWrap.removeClass('menu-active').addClass('menu-inactive');

或者，如果可能的话，在CSS中进行媒体查询：

@media screen and (max-width: 991px) {
    .site-wrap {
        /* active appearance */
    }
}

@media screen and (min-width: 992px) {
    .site-wrap {
        /* inactive appearance */
    }
}