当 HTML、CSS 和 JavaScript 分别存放在独立文件中时，因脚本在 DOM 加载完成前执行，导致 getElementsByClassName 无法获取元素，从而折叠功能失效；解决方法是延迟脚本执行时机。
当 html、css 和 javascript 分别存放在独立文件中时，因脚本在 dom 加载完成前执行，导致 `getelementsbyclassname` 无法获取元素，从而折叠功能失效；解决方法是延迟脚本执行时机。
在构建本地 HTML 帮助文档（如 Windows 应用的离线帮助系统）时，将结构（HTML）、样式（CSS）和行为（JavaScript）分离是良好实践。但正如 W3Schools 的「Collapsible」示例所示，若直接将 <script src="javascript.js"> 放入 <head> 中，脚本会在浏览器解析到 <body> 内容前就已执行——此时 .collapsible 按钮尚未被创建，document.getElementsByClassName("collapsible") 返回空集合，后续事件监听器自然无法绑定，导致点击无响应。
✅ 正确加载顺序：两种可靠方案
方案一：将 <script> 移至 </body> 前（推荐用于本地 HTML 帮助）
这是最直观、兼容性最佳的方式。修改 index.html，将脚本引用从 <head> 移至 <body> 底部：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="./styles.css"> </head> <body> <h2>Collapsibles</h2> <p>A Collapsible:</p> <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p> </div> <!-- ✅ 脚本置于 body 结束前，确保 DOM 已就绪 --> <script src="./javascript.js"></script> </body> </html>
? 注意：<link> 标签无需 </link> 闭合（XHTML 风格已过时），type="text/css" 在 HTML5 中可省略；同理，<script> 的 type="text/javascript" 也非必需。
方案二：保留 <head> 中的脚本，添加 defer 属性
若需维持资源集中声明的结构（例如便于构建工具处理），可在 <head> 中使用 defer：
立即学习“前端免费学习笔记（深入）”；
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./styles.css"> <!-- ✅ defer 确保脚本在 DOM 解析完成后、DOMContentLoaded 事件前执行 --> <script defer src="./javascript.js"></script> </head>
defer 是 HTML5 标准属性，适用于外部脚本（不支持 inline script），它保证：
- 脚本下载与 HTML 解析并行；
- 执行严格按 <script> 出现顺序；
- 且一定在 DOM 构建完成之后、页面渲染前运行 —— 完美匹配本场景需求。
⚠️ 补充注意事项
- 不要使用 async：async 会异步下载并立即执行，破坏执行顺序，可能导致 DOM 尚未就绪即运行 JS。
-
避免 window.onload 或 DOMContentLoaded 封装（除非必要）：本例中 defer 或底部加载已足够；若仍需显式监听，推荐 DOMContentLoaded（比 load 更早触发，且不等待图片等资源）：
// javascript.js 中可选写法（非必须，仅作参考） document.addEventListener('DOMContentLoaded', function() { const coll = document.getElementsByClassName("collapsible"); for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); const content = this.nextElementSibling; content.style.display = content.style.display === "block" ? "none" : "block"; }); } }); - 本地文件协议（file://）限制：某些现代浏览器对 file:// 协议下的跨源策略更严格，但本例仅涉及同目录静态资源，不受影响；若未来引入 AJAX 或 fetch，则需注意。
✅ 总结
折叠功能失效的根本原因不是路径错误或语法问题，而是执行时机与 DOM 生命周期不匹配。只需确保 JavaScript 在 .collapsible 元素存在于文档中之后运行——通过 defer 属性或 <body> 底部加载，即可 100% 解决该问题。对于离线 HTML 帮助系统，二者均稳定可靠，建议优先采用 defer 以保持语义清晰与结构统一。
