页面加载时onclick逻辑异常，默认隐藏区块未生效该如何解决

方案1：CSS默认配置（首推） #

不需要依赖JS执行时机，完全避免内容加载闪动问题：

• 给目标区块加自定义类名，比如toggle-content，直接在CSS中定义默认隐藏状态：

/* 默认隐藏 */
.toggle-content {
  display: none;
}
/* 激活时显示 */
.toggle-content.show {
  display: block;
}

• HTML部分直接写死初始状态：

<button id="toggleBtn">Show More</button>
<div class="toggle-content" id="contentBlock">
  <!-- 需要切换显示的内容 -->
</div>

• JS仅处理点击切换逻辑即可：

const toggleBtn = document.querySelector('#toggleBtn');
const contentBlock = document.querySelector('#contentBlock');

toggleBtn.addEventListener('click', () => {
  const isShow = contentBlock.classList.toggle('show');
  toggleBtn.textContent = isShow ? 'Show Less' : 'Show More';
});

方案2：JS初始化控制（仅特殊场景使用） #

如果业务逻辑要求必须用JS控制初始状态，需要监听DOM加载完成事件再执行初始化，避免JS执行时DOM还没渲染完成导致操作失效：

document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.querySelector('#toggleBtn');
  const contentBlock = document.querySelector('#contentBlock');
  
  // 初始化隐藏
  contentBlock.style.display = 'none';
  toggleBtn.textContent = 'Show More';

  // 绑定点击事件
  toggleBtn.addEventListener('click', () => {
    const isHidden = contentBlock.style.display === 'none';
    contentBlock.style.display = isHidden ? 'block' : 'none';
    toggleBtn.textContent = isHidden ? 'Show Less' : 'Show More';
  });
});

该方案存在弊端：如果JS加载/执行慢，会出现目标区块先显示几秒再突然隐藏的闪动问题，非必要不推荐。

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