如何根据窗口宽度自动添加/移除类，实现无需刷新的实时效果？

原代码的问题在于只在页面首次加载时判断一次窗口宽度，后续窗口大小改变时不会重新执行逻辑，所以必须刷新页面才能生效。要实现实时响应，需要把判断逻辑封装成可复用的函数，并绑定到窗口的resize事件上，同时注意避免重复绑定点击事件。

修改后的代码： #

// 封装窗口宽度判断与事件绑定逻辑
function handleSidebarState() {
  // 先解绑之前的点击事件，避免重复绑定导致多次触发
  $('.close-btn').off('click');
  $('.menu-btn').off('click');

  if (window.innerWidth > 850) {
    // 大屏逻辑：侧边栏默认显示，点击关闭按钮隐藏，点击菜单按钮显示
    $('.side-bar').removeClass('non-active');
    $('.menu-btn').css('visibility', 'hidden');

    $('.close-btn').click(function () {
      $('.side-bar').addClass('non-active');
      $('.menu-btn').css('visibility', 'visible');
    });

    $('.menu-btn').click(function () {
      $('.side-bar').removeClass('non-active');
      $('.menu-btn').css('visibility', 'hidden');
    });
  } else {
    // 小屏逻辑：侧边栏默认隐藏，点击菜单按钮显示，点击关闭按钮隐藏
    $('.side-bar').addClass('non-active');
    $('.menu-btn').css('visibility', 'visible');

    $('.menu-btn').click(function () {
      $('.side-bar').removeClass('non-active');
      $('.menu-btn').css('visibility', 'hidden');
    });

    $('.close-btn').click(function () {
      $('.side-bar').addClass('non-active');
      $('.menu-btn').css('visibility', 'visible');
    });
  }
}

// 页面初始化时执行一次，确保初始状态正确
handleSidebarState();

// 绑定窗口resize事件，实时响应宽度变化
$(window).on('resize', handleSidebarState);

关键修改点说明： #

• 将核心逻辑封装成handleSidebarState函数，方便初始化和窗口变化时重复调用
• 每次执行函数前用off('click')解绑之前的点击事件，防止窗口多次resize后绑定多个相同事件导致点击一次触发多次
• 大屏和小屏逻辑中都明确设置了初始状态（比如大屏默认显示侧边栏、隐藏菜单按钮），避免窗口切换宽度时状态混乱
• 绑定resize事件，窗口宽度变化时自动重新执行逻辑，无需刷新页面

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