通过移除 HTML 中 .panel-wrap 元素上多余的 panel-open 类，并确保 CSS 的初始状态隐藏内容区域，即可实现面板加载时默认关闭。JavaScript 仅负责切换状态，不干预初始渲染。
通过移除 html 中 `.panel-wrap` 元素上多余的 `panel-open` 类，并确保 css 的初始状态隐藏内容区域，即可实现面板加载时默认关闭。javascript 仅负责切换状态，不干预初始渲染。
在当前实现中，面板默认展开的根本原因在于：HTML 结构中 .panel-wrap 元素被错误地预先添加了 panel-open 类（如答案中反向给出的“修复示例”所示），导致 CSS 规则 .panel-open .panel-contenido { display: initial; } 在页面加载时立即生效。
✅ 正确做法是：初始 HTML 中不包含 panel-open 类，让面板处于自然闭合状态；所有显隐逻辑完全交由 JavaScript 的 toggle() 控制。
✅ 修正后的 HTML（关键修改）
<div class="panel-wrap"> <!-- 移除 panel-open -->
<div class="panel-contenido">
<p class="titulo">INFORMATION</p>
<p><span class="subtitle">Info</span> that is important.</p>
</div>
<button class="panel-toggle" type="button">
@@##@@
@@##@@
</button>
</div>
✅ 补充建议：增强健壮性（推荐）
为避免因 JS 加载延迟或执行失败导致面板“卡死”在错误状态，建议在 CSS 中显式声明初始隐藏态：
/* 默认隐藏内容区 */
.panel-contenido {
display: none;
}
/* 仅当父级有 panel-open 时才显示 */
.panel-open .panel-contenido {
display: block; /* 推荐用 block 替代 initial，语义更明确 */
}
/* 同理控制按钮图标可见性 */
.toggle-close {
display: none;
}
.panel-open .toggle-open {
display: none;
}
.panel-open .toggle-close {
display: inline-block;
}
✅ JavaScript 保持简洁（无需改动）
document.querySelector(".panel-toggle").addEventListener("click", () => {
document.querySelector(".panel-wrap").classList.toggle("panel-open");
});
⚠️ 注意事项：
- 确保该 JS 在 DOM 加载完成后执行（如放在
DOMContentLoaded事件中或底部）；- 若页面含多个同类面板，请改用
querySelectorAll+ 循环绑定，避免仅控制首个元素；- 如需支持键盘访问（如回车/空格触发），可为按钮添加
role="button"并监听keydown事件。至此，面板将在每次页面加载时默认关闭，用户首次点击
?按钮后才展开——符合无障碍设计原则与用户体验预期。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
