当屏幕宽度大于 1024px 时删除类（如果存在）答案

【问题标题】：Remove class (if present) when screen width is greater than 1024px当屏幕宽度大于 1024px 时删除类（如果存在）
【发布时间】：2022-12-23 04:39:06
【问题描述】：

在移动设备上，我有 2 个面板/绘图，它们是视口的宽度（并排）。有一个链接可以切换哪个在视图中，单击时，面板会向左/向右滑动。

但是在桌面上，不需要这样做，因为它们都在视图中。因此，如果屏幕宽度超过 'x'，我想删除这个 .cart__toggled 类。至于调整大小，它会固定在 UI 上。

这是我当前的代码，它切换类以将相关面板移入/移出视图：

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

toggle.addEventListener('click', e => {
   e.preventDefault();
   cart.classList.toggle('cart-toggled');
});

因此，简而言之，“逻辑”将是“如果屏幕宽度大于 x”，“如果 class .cart-toggled 应用于 .cart，则将其删除”。减少浏览器的with时不需要重新申请。

【问题讨论】：

标签： javascript html css matchmedia

【解决方案1】：

为此，您可以使用 window.matchMedia 方法检查当前屏幕宽度，然后在必要时使用 classList 属性的 remove 方法删除 cart-toggled 类。

以下是如何修改代码以执行此操作的示例：

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

const handleToggleClick = e => {
  e.preventDefault();
  cart.classList.toggle('cart-toggled');
};

const handleResize = () => {
  if (window.matchMedia(`(min-width: Xpx)`).matches) {
    cart.classList.remove('cart-toggled');
  }
};

toggle.addEventListener('click', handleToggleClick);
window.addEventListener('resize', handleResize);

在此示例中，应将 X 替换为您希望禁用切换行为的最小宽度。

每次调整窗口大小时都会调用 handleResize 函数，它使用 window.matchMedia 来检查当前屏幕宽度是否大于或等于 Xpx。如果是，它会从 cart 元素中删除 cart-toggled 类。

请注意，这只会删除已应用的购物车切换类，因此当屏幕宽度低于阈值时它不会干扰切换行为。

【讨论】：