本文解决在 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 展开完成事件，并传入参数：
<div class="row">
<div class="col" data-toggle="collapse" data-target="#show_0" id="_show_0">
<b>Show 3D</b>
</div>
</div>
<div id="show_0" class="collapse">
<div class="row">
<div class="col">
<div id="viewport_0" style="width:100%; height:800px;"></div>
</div>
</div>
</div>
<script>
// 定义加载函数（不立即执行）
function showPDB(path, containerId) {
// 确保容器存在且可见
const container = document.getElementById(containerId);
if (!container || getComputedStyle(container).display === 'none') {
console.warn(`Container #${containerId} not ready yet.`);
return;
}
const stage = new NGL.Stage(containerId, { backgroundColor: 'white' });
stage.loadFile(path).then(function (o) {
o.addRepresentation("cartoon", { color: 'white' });
o.autoView();
}).catch(err => console.error("Failed to load PDB:", err));
}
// 监听展开完成事件（推荐！）
document.getElementById('show_0').addEventListener('shown.bs.collapse', function () {
showPDB('https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb', 'viewport_0');
});
</script>⚠️ 注意事项
- 不要依赖 onclick 行内调用 + setTimeout：未指定毫秒数的 setTimeout(fn) 默认延迟 0ms，仅进入宏任务队列，无法保证 DOM 重排（reflow）完成；而 shown.bs.collapse 是 Bootstrap 在 transitionend 后精确触发的真实完成信号。
- 确保 NGL 脚本加载完成：<script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://www.php.cn/zt/19618.html" target="_blank">cdn.<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">jsdelivr<a style="color:#f60; text-decoration:underline;" title= ".net" href="https://www.php.cn/zt/64958.html" target="_blank">.net/<a style="color:#f60; text-decoration:underline;" title= "npm" href="https://www.php.cn/zt/16096.html" target="_blank">npm/ngl@latest/dist/ngl.min.js"></script> 应置于
