屏幕宽度大于1024px时移除.cart-toggled类的实现方法咨询

可以通过添加屏幕尺寸监听逻辑，配合初始化检查来实现需求，具体代码修改如下：

首先，定义处理屏幕尺寸变化的函数并整合原有逻辑：

const cart = document.querySelector('.cart');
const toggle = document.querySelector('.cart__toggle');

// 处理屏幕尺寸变化的函数
function handleScreenResize() {
  // 当屏幕宽度超过1024px时，移除.cart-toggled类
  if (window.innerWidth > 1024) {
    cart.classList.remove('cart-toggled');
  }
}

// 页面初始化时先检查一次屏幕宽度，避免初始状态不符合预期
handleScreenResize();

// 给窗口添加resize事件监听，用防抖优化避免频繁触发
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(handleScreenResize, 100);
});

// 保留原有的点击切换逻辑（移动端正常使用，桌面端误触后resize会自动修正）
toggle.addEventListener('click', e => {
  e.preventDefault();
  cart.classList.toggle('cart-toggled');
});

逻辑说明： #

• 初始化检查：页面加载后立即执行一次屏幕宽度判断，确保桌面端打开页面时，不会出现带.cart-toggled类的异常UI状态。
• resize防抖监听：窗口尺寸变化时用100ms延迟防抖，避免拖动窗口过程中频繁触发函数损耗性能；只要宽度超过1024px，就自动移除目标类。
• 保留点击功能：移动端的面板切换逻辑不受影响，即便桌面端误触切换按钮，后续的resize事件也会自动修正类状态，保证桌面端UI正常。

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