如何在窗口宽度超过1050px时移除元素的类（支持jQuery）

完全可以用jQuery实现这个需求，逻辑清晰还能兼顾性能——咱们只需要监听窗口尺寸变化，在宽度超过1050px时精准移除目标类即可。

步骤1：编写核心处理函数 #

这个函数负责检查窗口宽度，根据条件处理LI元素的类：

function handleListItemClasses() {
  // 获取当前窗口宽度
  const windowWidth = $(window).width();
  // 替换成你实际要移除的类名，多个类用空格分隔即可
  const targetClasses = "your-target-class another-class";

  if (windowWidth > 1050) {
    // 选中所有带目标类的LI元素，移除指定类
    $("li").removeClass(targetClasses);
  } else {
    // （可选）如果需要窗口缩小时重新添加类，取消下面注释并调整逻辑
    // $("li").not("." + targetClasses.split(" ").join(", li.")).addClass(targetClasses);
  }
}

步骤2：绑定事件并初始化 #

页面加载时先执行一次函数（避免页面加载时窗口已符合条件但类没被移除），同时给resize事件加上防抖优化，减少频繁触发：

$(document).ready(function() {
  // 页面加载完成后立即检查一次
  handleListItemClasses();

  // 防抖定时器，避免窗口拖动时频繁触发函数
  let resizeDebounce;
  $(window).on("resize", function() {
    clearTimeout(resizeDebounce);
    // 250ms延迟可根据需求调整
    resizeDebounce = setTimeout(handleListItemClasses, 250);
  });
});

额外提示： #

• 如果有多个不同类需要移除，直接在targetClasses里用空格分隔，removeClass()会一次性处理所有指定类。
• 防抖逻辑能有效减少函数执行次数，提升页面在窗口调整时的流畅度。
• 若需要窗口宽度回到1050px以下时重新添加类，可参考注释里的逻辑，注意先判断元素是否无该类再添加，避免重复操作。

内容的提问来源于stack exchange，提问作者Dimitar