javascript - 当响应式样式不再适用时删除类

Question

所以我制作了一个响应式菜单，看起来像智能手机的菜单(从侧面滑动的那个，我不确定它是怎么叫的)，并且它的切换器(这是一个 anchor )仅在屏幕上显示使用 @media screen and (max-width: 960px) 小于 960px。 现在切换菜单，我使用 JQ 的 .toggleClass 将类添加到正文，如下所示:

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

现在的问题是，当我打开菜单后将窗口拉伸(stretch)回大于 960px 的尺寸时，切换器消失并且它添加的类('.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.

来源:- https://stackoverflow.com/a/8943979/1632286