如何修复matchMedia失效问题？jQuery媒体查询类切换故障排查

我帮你找出代码不工作的原因啦，主要是两个关键问题，咱们一步步修正：

1. 误用了jQuery的方法 #

你写的$('.navbar-wrapper').toggle('element-view')是错的——jQuery的toggle()方法是用来切换元素的显示/隐藏状态的，而要切换CSS类，必须用toggleClass()方法：

// 正确的类切换写法
$('.navbar-wrapper').toggleClass('element-view');

另外看你的需求描述：“若.navbar-wrapper包含.element-view类，则关闭或切换该类”，如果你只想移除这个类（而不是切换），可以直接用removeClass()，不用先判断hasClass，因为removeClass()在类不存在时不会报错：

// 直接移除类，无需提前判断
$('.navbar-wrapper').removeClass('element-view');

2. 缺少窗口大小变化的监听 #

你的代码只会在页面加载时执行一次，当用户调整窗口宽度（比如从窄屏拖到≥800px）时，不会重新触发检查逻辑。我们需要把逻辑封装成函数，然后绑定到页面加载和窗口resize事件：

完整可运行代码 #

// 封装检查逻辑为可复用函数
function handleNavbarClass() {
  const isWideScreen = window.matchMedia('(min-width: 800px)').matches;
  
  if (isWideScreen) {
    // 按需求：如果存在类则切换（或直接移除）
    // 切换类（存在则移除，不存在则添加）
    $('.navbar-wrapper').toggleClass('element-view');
    // 如果你只想移除类，替换成下面这行：
    // $('.navbar-wrapper').removeClass('element-view');
  }
}

// 页面加载完成后执行一次
$(document).ready(function() {
  handleNavbarClass();
  
  // 监听窗口大小变化，触发检查
  $(window).on('resize', handleNavbarClass);
});

额外优化：防抖处理（可选） #

窗口resize事件会频繁触发，可能导致性能问题，添加防抖函数可以减少函数执行次数，提升体验：

// 防抖函数：延迟执行，避免频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 绑定防抖后的事件处理函数
$(window).on('resize', debounce(handleNavbarClass));

这样修改后，就能实现你预期的效果：当屏幕宽度≥800px时，自动检查并切换（或移除）.element-view类，窗口大小变化时也会实时响应。

内容的提问来源于stack exchange，提问作者Ugonna D. E.