
本文解决在 bootstrap `collapse` 组件内调用 ngl 3d 查看器时需双击才生效的问题,核心是确保 dom 元素完全展开后再初始化 ngl stage。
在使用 Bootstrap 的 .collapse 类实现“点击展开 + 加载 3D 视图”交互时,常见问题为:用户首次点击“Show 3D”,折叠区域开始展开动画,但此时
根本原因在于:Bootstrap 的 collapse 切换是异步的(含 CSS 过渡),而 showPDB() 在点击瞬间立即执行,此时目标容器尚未被浏览器布局引擎确认为可见、可渲染的 DOM 节点。
✅ 正确解法不是简单加 setTimeout(如答案中未设延迟值的空 setTimeout 仅推入微任务队列,无法保证 DOM 更新完成),而是应监听 Bootstrap 提供的 原生事件钩子,在折叠内容完全显示后触发 NGL 初始化。
✅ 推荐方案:使用 Bootstrap 的 shown.bs.collapse 事件
将 showPDB 调用解耦,改为监听 #show_0 展开完成事件,并传入参数:
Show 3D
⚠️ 注意事项
- 不要依赖 onclick 行内调用 + setTimeout:未指定毫秒数的 setTimeout(fn) 默认延迟 0ms,仅进入宏任务队列,无法保证 DOM 重排(reflow)完成;而 shown.bs.collapse 是 Bootstrap 在 transitionend 后精确触发的真实完成信号。
- 确保 NGL 脚本加载完成: 应置于










