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

Remove class when responsive style no longer applies

本文关键字：删除 不再 响应 样式      更新时间：2023-09-26

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

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

现在的问题是，当我打开菜单后将窗口拉伸回大于 960px 的大小时，切换器消失了，它添加的类（'.mobile-slide-nav'）保留在正文元素中......

所以。。。我该如何解决？有什么想法吗？很抱歉英语不好:)

$(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

相关文章：