Question

所以我做了一个响应式菜单，看起来像智能手机的菜单（从侧面滑动的菜单，我不确定它是如何调用的），以及它的切换器（它是一个锚点）仅在屏幕小于960px时使用@media screen and (max-width: 960px)显示。现在切换菜单我使用JQ＆＃39; .toggleClass将一个类添加到正文中，如下所示：

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

现在的问题是，当我打开菜单后将窗口拉回到比960px更大的尺寸时，切换器消失，并且它添加的类（＆＃39; .mobile-slide-nav＆＃39;）仍然存在在身体元素....

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

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.

src： - https://stackoverflow.com/a/8943979/1632286

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

1 个答案: