页面刷新后如何让.info类div初始状态保持隐藏？

这个问题其实挺常见的，核心原因就是JavaScript的执行时机晚于页面初始渲染——浏览器先把元素按默认样式渲染出来，等JS加载执行完才去隐藏它，就出现了“先显示再消失”的闪现情况。要彻底解决，得让元素从一开始就处于隐藏状态，这就得靠CSS来实现，毕竟CSS是优先于JS被解析应用的。

具体实现方案 #

1. 用CSS默认隐藏.info元素 #

直接在样式里给.info类设置隐藏样式，这样页面刚渲染的时候，这个元素就不会显示出来：

.info {
  display: none;
  /* 这里保留你原本给.info设置的其他样式，比如padding、背景色之类的 */
}

2. 调整JavaScript逻辑 #

如果你的JS原本写了页面加载后隐藏元素的代码，现在可以删掉这部分，只保留切换显示/隐藏的逻辑就行。更推荐用类切换的方式，比直接修改style.display更灵活：

// 找到触发折叠/展开的按钮（假设按钮类是.toggle-btn，你可以换成自己的选择器）
const toggleBtn = document.querySelector('.toggle-btn');
const infoDiv = document.querySelector('.info');

toggleBtn.addEventListener('click', function() {
  // 用classList.toggle来切换显示状态
  infoDiv.classList.toggle('show');
});

对应的CSS要补充一个.show类，用来控制元素显示：

.info.show {
  display: block; /* 如果你原本用的是flex布局，就改成display: flex */
}

3. 特殊场景：需要默认展开的情况 #

要是某些场景下你需要这个.info元素默认是展开的，只需要在HTML里给它加上show类就行，JS的切换逻辑依然能正常工作，也不会有闪现问题：

<div class="info show">
  <!-- 你的信息内容 -->
</div>

为什么这个方法靠谱？ #

浏览器处理页面的顺序是先解析CSS并应用样式，之后才会执行JavaScript。用CSS默认隐藏元素，相当于从渲染的第一步就把元素设为不可见，完全避开了JS加载延迟导致的闪现问题，体验会顺畅很多。

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