如何在JavaScript中根据视口宽度变化自动移除侧边栏控制事件并恢复布局

我完全理解你的需求：在视口宽度 ≤992px 时，通过点击按钮控制侧边栏的显示/隐藏，同时调整中间区域的宽度；当视口宽度 >993px 时，自动恢复默认布局（侧边栏正常显示、中间区域宽度100%），还要确保小屏的控制事件不会干扰大屏状态。

你的现有代码已经实现了小屏的点击切换逻辑，但缺少窗口尺寸变化的监听机制，导致切换到大屏时无法自动触发布局重置。下面是优化后的完整解决方案：

一、重构核心逻辑，避免重复绑定事件 #

首先把侧边栏切换的逻辑封装成独立函数，同时添加事件的绑定/解绑控制，防止重复绑定导致的逻辑异常：

// 提前缓存所有需要操作的DOM元素，避免重复查询
const sidebarBtnDiv = document.querySelector('.sidebar_button');
const sidebar = document.querySelector('你的侧边栏选择器'); // 请替换成实际的sidebar DOM选择器
const classMiddle = document.querySelector('#class_middle');
const closeLeftBtn = document.querySelector('.close_left');
const disLeftBtn = document.querySelector('.dis_left');

// 封装侧边栏切换的核心逻辑
function toggleSidebar(showSidebar) {
  if (showSidebar) {
    // 显示侧边栏，恢复中间区域默认宽度
    closeLeftBtn.classList.add('active');
    disLeftBtn.classList.remove('active');
    classMiddle.style.width = '100%';
    sidebar.style.display = 'block';
  } else {
    // 隐藏侧边栏，调整中间区域宽度
    disLeftBtn.classList.add('active');
    closeLeftBtn.classList.remove('active');
    classMiddle.style.width = '96vw';
    sidebar.style.display = 'none';
  }
}

// 绑定小屏专属的点击事件
function bindMobileEvents() {
  // 先解绑再绑定，防止重复绑定事件
  closeLeftBtn.removeEventListener('click', handleCloseLeftClick);
  disLeftBtn.removeEventListener('click', handleDisLeftClick);

  function handleCloseLeftClick() {
    toggleSidebar(false);
  }

  function handleDisLeftClick() {
    toggleSidebar(true);
  }

  closeLeftBtn.addEventListener('click', handleCloseLeftClick);
  disLeftBtn.addEventListener('click', handleDisLeftClick);
}

// 重置大屏布局并解绑小屏事件
function resetDesktopLayout() {
  // 恢复大屏默认布局
  classMiddle.style.width = '100%';
  sidebar.style.display = 'block';
  closeLeftBtn.classList.add('active');
  disLeftBtn.classList.remove('active');
  // 解绑小屏的点击事件，避免干扰大屏状态
  closeLeftBtn.removeEventListener('click', handleCloseLeftClick);
  disLeftBtn.removeEventListener('click', handleDisLeftClick);
}

二、添加窗口尺寸监听，自动适配视口变化 #

通过监听resize事件，实时判断视口宽度，触发对应的布局逻辑：

// 视口尺寸变化时的处理函数
function handleViewportChange() {
  const isMobile = window.innerWidth <= 992;
  if (isMobile) {
    // 小屏状态：绑定点击事件，保持当前切换状态
    bindMobileEvents();
  } else {
    // 大屏状态：重置为默认布局，解绑小屏事件
    resetDesktopLayout();
  }
}

// 页面首次加载时执行一次，适配初始视口
handleViewportChange();
// 监听窗口尺寸变化，实时响应
window.addEventListener('resize', handleViewportChange);

三、现有代码的问题分析 #

你的原始代码只在初始化时判断了sidebarbtn_div的显示状态，但没有监听窗口后续的尺寸变化：

1. 当用户先在小屏操作切换了侧边栏，再把窗口拉大到大屏时，代码不会自动执行布局重置，导致侧边栏可能保持隐藏状态、中间区域宽度异常。
2. 直接通过element.style.display判断元素显示状态并不严谨——如果元素的显示状态是通过CSS类（比如d-lg-none）控制的，element.style.display会返回空字符串，建议用getComputedStyle来获取实际渲染状态：

// 更严谨的元素显示状态判断方式
const isSidebarBtnVisible = window.getComputedStyle(sidebarBtnDiv).display !== 'none';

你的原始HTML结构可直接复用 #

<div class="sidebar_button d-flex d-lg-none justify-content-center align-items-center z-3">
  <span class="close_left active p-2 py-3 rounded-circle" title="Close_left">&times;</span>
  <span class="dis_left p-2 py-3 rounded-circle" title="Dis_left">&#8827;</span>
</div>

备注：内容来源于stack exchange，提问作者Sefiu Rasheed