侧边栏默认展开，页面加载时先缩后展的异常问题求助

这个闪烁问题的根源很清晰：你的HTML里给body默认加了sidebar-minified和sidebar-minified-out类，而$(document).ready()是等DOM完全加载完成后才执行的。这就导致页面先渲染出折叠状态的侧边栏，之后JS才移除类切换到展开状态，自然会出现“先缩后展”的视觉跳动。

要解决这个问题，核心思路是让页面初始渲染时就直接显示正确的状态，而不是先错再改。具体步骤如下：

1. 修正HTML初始类 #

先把body上默认的折叠相关类去掉，让它默认处于展开的基础状态：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="body">
 <aside class="left-sidebar"></aside>
 <button id="sidebar-toggler" class="sidebar-toggle">Collapse/Expand</button>
</body>

2. 提前处理localStorage状态 #

把状态判断和类设置的逻辑移到$(document).ready()外面——不需要等DOM加载完成再做这件事，在脚本执行时就可以直接处理，这样页面渲染时就已经是正确的状态了：

// 先获取DOM元素，提前处理状态
const body = document.getElementById('body');
const savedState = localStorage.getItem('menu-closed');
window.isMinified = false;

// 根据localStorage设置初始状态
if (savedState !== null) {
  window.isMinified = savedState === "true";
}

// 给body添加对应类，确保初始渲染正确
if (window.isMinified) {
  body.classList.add('sidebar-minified');
} else {
  body.classList.add('sidebar-minified-out');
}

// 等DOM加载完成后绑定点击事件
$(document).ready(function() {
  $("#sidebar-toggler").on("click", function () {
    if (!window.isMinified) {
      $(body).removeClass("sidebar-minified-out").addClass("sidebar-minified");
      window.isMinified = true;
      localStorage.setItem('menu-closed', 'true');
    } else {
      $(body).removeClass("sidebar-minified").addClass("sidebar-minified-out");
      window.isMinified = false;
      localStorage.setItem('menu-closed', 'false');
    }
  });
});

3. CSS保持不变 #

你的CSS过渡逻辑是正常的，不需要修改：

#body {
 background: #fff;
 transition: all 0.3s;
}
aside.left-sidebar{
 background-color: #2c0963;
 height: 100vh;
}
.sidebar-minified-out .left-sidebar {
 width: 180px;
 transition: width .3s ease-in;
}
.sidebar-minified .left-sidebar {
 width: 75px;
 transition: width .3s ease-in;
}
.sidebar-toggle {
 font-weight: 300;
 font-size: 15px;
 cursor: pointer;
 height: 30px;
 position: absolute;
 left: 20%;
 top: 0;
}

为什么这样能解决问题？ #

• 初始HTML不再带有会让侧边栏折叠的类，避免了错误的初始渲染
• 脚本执行时就直接根据localStorage状态给body加上正确的类，页面渲染的第一帧就是用户应该看到的状态（无保存状态时默认展开，有保存状态时对应折叠/展开）
• 点击事件的逻辑保持不变，依然能正常切换状态并保存到localStorage

这样修改后，页面加载时就不会再出现闪烁的问题了。

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