本文介绍如何让 html 中的可折叠区块在页面加载时默认处于关闭状态，并在用户点击时自动切换标题文字（如“open collapsible” ↔ “close collapsible”），全程仅用原生 javascript 和 css，无需框架。
本文介绍如何让 html 中的可折叠区块在页面加载时默认处于关闭状态，并在用户点击时自动切换标题文字（如“open collapsible” ↔ “close collapsible”），全程仅用原生 javascript 和 css，无需框架。
要实现一个默认关闭、点击切换展开/收起状态、同时动态更新触发按钮文本的可折叠区块，关键在于三步协同：HTML 结构语义化、CSS 初始隐藏控制、以及 JavaScript 状态驱动逻辑。下面将逐一说明并提供完整可运行方案。
✅ 步骤一：确保内容默认隐藏（关键！）
原代码中未设置 .collapsible_content 的初始 display: none，导致页面加载时内容直接显示。解决方法是在 DOM 加载后、事件绑定前，主动为每个折叠内容设为隐藏：
const coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
// 关键：初始化时隐藏对应内容区
coll[i].nextElementSibling.style.display = "none";
}⚠️ 注意：此操作必须在 addEventListener 之前执行，否则可能被后续脚本覆盖；也不建议仅靠 CSS 设置 display: none（因可能被其他样式干扰），JS 主动控制更可靠。
✅ 步骤二：统一事件逻辑，同步控制显示与文本
原代码中存在两个独立的 click 监听器，且第二个监听器的判断逻辑有误（e.target.innerText == "Close Collapsible" 永远不会成立，因为初始文本是 “Open Collapsible”，且未更新）。应合并为单个监听器，在切换 display 的同时更新按钮文本：
立即学习“前端免费学习笔记（深入）”；
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
this.textContent = "Open Collapsible"; // 使用 textContent 更安全（避免 HTML 注入）
} else {
content.style.display = "block";
this.textContent = "Close Collapsible";
}
});
}✅ 推荐使用 textContent 而非 innerText：语义更准确、性能更好、且规避潜在 XSS 风险（当文本含特殊字符时更稳定）。
✅ 步骤三：优化结构与健壮性（可选但推荐）
-
添加 role="button" 和 tabindex="0"，提升可访问性（支持键盘 Enter/Space 触发）：
<div class="collapsible heading" role="button" tabindex="0">Open Collapsible</div>
-
为 .collapsible_content 添加 aria-expanded 属性，配合屏幕阅读器：
// 在 click 处理中同步更新 this.setAttribute("aria-expanded", content.style.display === "block");
? 完整精简示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.collapsible { cursor: pointer; }
.collapsible_content { margin: 10px 0; }
/* 其他原有 CSS 保持不变 */
</style>
</head>
<body>
<div class="centered">
<div class="content">
<div class="collapsible heading">Open Collapsible</div>
<div class="collapsible_content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const coll = document.querySelectorAll('.collapsible');
coll.forEach(el => {
const content = el.nextElementSibling;
// 初始化隐藏
content.style.display = 'none';
el.addEventListener('click', () => {
if (content.style.display === 'block') {
content.style.display = 'none';
el.textContent = 'Open Collapsible';
} else {
content.style.display = 'block';
el.textContent = 'Close Collapsible';
}
});
});
});
</script>
</body>
</html>? 总结
- ✅ 默认关闭：通过 JS 在初始化阶段设置 content.style.display = "none" 实现；
- ✅ 文本切换：在同一个事件处理器中根据当前显示状态反向更新按钮文案；
- ✅ 健壮性：使用 textContent、DOMContentLoaded 包裹逻辑、避免重复监听；
- ✅ 可访问性增强：添加 role="button"、tabindex 和 aria-expanded 可进一步满足 WCAG 标准。
该方案轻量、兼容性强（支持所有现代浏览器及 IE11+），无需依赖 jQuery 或第三方库，适合嵌入任何静态页面或 CMS 模板中。
