当响应式样式不再适用时删除 class

Question

所以我做了一个响应式菜单，看起来像智能手机的菜单（从侧面滑动的那个，我不知道它是怎么叫的），它的切换器（这是一个锚点）只有在屏幕小于 960px 使用 @media screen and (max-width: 960px)。现在切换菜单，我使用 JQ 的 .toggleClass 向正文添加 class，如下所示：

$(document).ready(function(){
    $('.btn-mobile-nav').click(function(e){
        e.preventDefault();
        $('body').toggleClass('mobile-slide-nav');
    });
});

现在的问题是，当我打开菜单后将 window 拉伸回大于 960px 的尺寸时，切换器消失并且它添加的 class('.mobile-slide -nav') 保留在 body 元素中....

所以...我该如何解决？有任何想法吗？抱歉英语不好:)

Answer 1

$(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   if(width > 960){
       $('body').removeClass('mobile-slide-nav');
   }
})
.resize();//trigger the resize event on page load.

来源：-

当响应式样式不再适用时删除 class

Remove class when responsive style no longer applies

html

javascript

css

jquery

responsive-design