基于屏幕宽度的jQuery媒体查询切换按钮：不同宽度执行不同操作

这问题我之前做电商列表页时也碰到过，核心就是要让按钮在不同屏幕尺寸下只触发对应的逻辑，避免双重执行。给你几个实用的解决方案：

方案1：点击事件内做视口宽度判断 #

直接在按钮的点击事件里检查当前屏幕宽度，只执行对应端的逻辑，同时阻止事件冒泡防止mmenu误触发：

document.querySelector('.filter-toggle-btn').addEventListener('click', function(e) {
  // 先阻止默认行为和事件冒泡，避免mmenu的绑定事件被意外触发
  e.preventDefault();
  e.stopPropagation();

  const isMobile = window.innerWidth < 1024;
  if (isMobile) {
    // 移动端：只触发mmenu的切换动作
    $('#off-canvas-filter').trigger('mmenu::toggle');
  } else {
    // 桌面端：切换页面内筛选器面板的显示状态
    const desktopFilter = document.querySelector('.desktop-filter-panel');
    desktopFilter.classList.toggle('is-hidden');
  }
});

方案2：动态绑定/解绑事件（适配窗口 resize） #

如果需要支持窗口大小变化时自动切换逻辑，可以在页面加载和resize时，根据屏幕尺寸给按钮绑定对应的事件：

// 定义两个端的处理函数
function handleDesktopToggle(e) {
  e.preventDefault();
  const desktopFilter = document.querySelector('.desktop-filter-panel');
  desktopFilter.classList.toggle('is-hidden');
}

function handleMobileToggle(e) {
  e.preventDefault();
  $('#off-canvas-filter').trigger('mmenu::toggle');
}

// 动态绑定事件的函数
function updateToggleEvents() {
  const toggleBtn = document.querySelector('.filter-toggle-btn');
  // 先移除旧的事件监听，避免重复绑定
  toggleBtn.removeEventListener('click', handleDesktopToggle);
  toggleBtn.removeEventListener('click', handleMobileToggle);

  if (window.innerWidth < 1024) {
    toggleBtn.addEventListener('click', handleMobileToggle);
  } else {
    toggleBtn.addEventListener('click', handleDesktopToggle);
  }
}

// 页面加载时初始化绑定
document.addEventListener('DOMContentLoaded', updateToggleEvents);
// 窗口大小变化时重新绑定
window.addEventListener('resize', updateToggleEvents);

方案3：结合CSS媒体查询简化逻辑 #

用CSS控制不同端的面板显示状态，然后在点击事件里判断哪个面板是可见的，只处理可见的那个：

/* 移动端隐藏桌面端的筛选器面板 */
@media (max-width: 1023px) {
  .desktop-filter-panel {
    display: none !important;
  }
}

document.querySelector('.filter-toggle-btn').addEventListener('click', function(e) {
  e.preventDefault();
  const desktopFilter = document.querySelector('.desktop-filter-panel');
  const isDesktopPanelActive = window.getComputedStyle(desktopFilter).display !== 'none';

  if (isDesktopPanelActive) {
    desktopFilter.classList.toggle('is-hidden');
  } else {
    $('#off-canvas-filter').trigger('mmenu::toggle');
  }
});

额外优化建议 #

初始化mmenu时，只在移动端环境下执行，避免桌面端生成多余的离屏面板：

document.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth < 1024) {
    // 仅移动端初始化mmenu
    $('#off-canvas-filter').mmenu({
      // 你的mmenu配置项
      offCanvas: {
        position: 'left'
      }
    });
  }
});

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