javascript - 有没有更有效的方法使用 jQuery 添加和删除这些 CSS 类？

Question

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

我需要向另一个 div 添加和删除 CSS 类，以将所有内容联系在一起。但是看看我添加和删除类的方式，我觉得还有更有效的方法吗？

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 */
    }
}