如何在 Bootstrap 折叠组件中单次点击即加载 NGL 3D 分子可视化

本文解决在 bootstrap `collapse` 组件内调用 ngl 3d 查看器时需双击才生效的问题，核心是确保 dom 元素完全展开后再初始化 ngl stage。

在使用 Bootstrap 的 .collapse 类实现“点击展开 + 加载 3D 视图”交互时，常见问题为：用户首次点击“Show 3D”，折叠区域开始展开动画，但此时

尚未完成渲染（仍处于 display: none 或过渡态），导致 new NGL.Stage(id, ...) 初始化失败或静默忽略——结果是第二次点击时元素已就绪，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 脚本加载完成： 应置于