如何默认隐藏移动端侧边栏菜单？JS代码问题排查与修复

核心问题分析 #

你遇到的bug根源是：直接通过JS设置的内联样式（left: -250px）优先级远高于CSS类样式，导致点击按钮时的类切换逻辑被内联样式覆盖，无法触发显示/隐藏的视觉变化。

推荐解决方案1：用CSS媒体查询接管默认状态（最简洁可靠） #

放弃JS直接设置内联样式，改用CSS媒体查询处理不同屏幕的默认状态，JS只负责交互切换类名：

1. 编写基础CSS样式 #

/* 桌面端默认显示 */
.side-bar {
  left: 0;
  transition: left 0.3s ease; /* 添加入退场动画 */
}

/* 侧边栏隐藏状态的通用样式 */
.side-bar.hidden {
  left: -250px;
}

/* 移动端默认隐藏（和你的断点保持一致） */
@media (max-width: 849px) {
  .side-bar {
    left: -250px;
  }
}

2. 简化JS交互逻辑 #

只负责切换类名和按钮显示状态，不用管屏幕尺寸判断：

$('.close-btn, .menu-btn').on('click', function() {
  $('.side-bar').toggleClass('hidden');
  // 切换按钮的显示/隐藏
  $('.menu-btn').toggle();
  $('.close-btn').toggle();
});

解决方案2：修复原有JS逻辑（保留屏幕尺寸检测） #

如果必须用JS做屏幕尺寸判断，避免直接设置内联样式，改用类名控制：

1. 补充CSS类样式 #

.side-bar {
  left: 0;
  transition: left 0.3s ease;
}

/* 隐藏状态统一用类控制 */
.side-bar.mobile-hidden,
.side-bar.hidden {
  left: -250px;
}

2. 修改JS逻辑 #

用类名替代内联样式，同时处理窗口 resize 事件：

// 检测屏幕尺寸并设置初始状态
function setSidebarDefault() {
  const $sidebar = $('.side-bar');
  if (window.innerWidth <= 849) {
    $sidebar.addClass('mobile-hidden').removeClass('hidden');
  } else {
    $sidebar.removeClass('mobile-hidden').removeClass('hidden');
  }
}

// 页面加载和窗口大小变化时执行
$(document).ready(setSidebarDefault);
$(window).on('resize', setSidebarDefault);

// 点击按钮切换隐藏状态
$('.close-btn, .menu-btn').on('click', function() {
  $('.side-bar').toggleClass('hidden');
  $('.menu-btn').toggle();
  $('.close-btn').toggle();
});

关键注意点 #

• 永远优先用CSS类控制样式，避免JS直接操作内联样式，防止样式优先级冲突。
• 媒体查询的断点要和JS判断的完全一致（这里是849px，对应桌面端>=850px）。

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