Electron应用中Bootstrap 5下拉菜单无法展开问题求助

我正在开发一款基于Electron的应用，此前使用的部分Bootstrap组件均能正常工作。之后需要使用带下拉菜单的按钮，直接复制了Bootstrap 5.2官方示例的代码进行测试，但下拉菜单无法展开。

问题代码 #

<div class="input-group mb-3">
  <span class="input-group-text key" id="basic-addon1">Pack type</span>
  <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">PVC/Clear</a></li>
    <li><a class="dropdown-item" href="#">PVC/PVDC</a></li>
    <li><a class="dropdown-item" href="#">PVC/Aclar</a></li>
    <li><a class="dropdown-item" href="#">PVC/PE/PVDC</a></li>
    <li><a class="dropdown-item" href="#">ALU/ALU</a></li>
    <li><a class="dropdown-item" href="#">Glass bottle clear</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">PVC/Clear - white</a></li>
    <li><a class="dropdown-item" href="#">PVC/PVDC - white</a></li>
    <li><a class="dropdown-item" href="#">PVC/Aclar - white</a></li>
    <li><a class="dropdown-item" href="#">PVC/PE/PVDC - white </a></li>
    <li><a class="dropdown-item" href="#">ALU/ALU - white </a></li>
    <li><a class="dropdown-item" href="#">Glass bottle clear - white </a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Amber glass bottle</a></li>
    <li><a class="dropdown-item" href="#">Glass ampule clear</a></li>
    <li><a class="dropdown-item" href="#">Glass ampule amber</a></li>
  </ul>
  <input type="text" class="form-control inputs input" aria-label="Username" aria-describedby="basic-addon1">
</div>   

已尝试无效的方案 #

• 引入jQuery（最初未引入）
• 将jQuery降级至3.5.1
• 下载并引入popper.js库

有效解决建议 #

1. 移除所有jQuery引入

Bootstrap 5完全弃用了jQuery，引入jQuery会和Bootstrap的事件系统冲突，直接删除页面中所有jQuery相关的脚本标签。

2. 使用Bootstrap整合版JS（内置Popper）

Bootstrap 5的下拉组件依赖Popper v2，但无需单独引入，直接使用包含Popper的Bootstrap bundle版本即可：

<!-- 先引入Bootstrap CSS -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<!-- 引入包含Popper的Bootstrap JS -->
<script src="path/to/bootstrap.bundle.min.js"></script>

建议将资源下载到本地项目中引入，避免Electron的网络访问限制，或者确保CDN地址能在Electron环境中正常加载。

3. 修正按钮属性

你的按钮同时保留了Bootstrap 4的data-toggle="dropdown"和Bootstrap 5的data-bs-toggle="dropdown"，Bootstrap 5仅识别data-bs-*前缀，删除旧属性：

<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>

4. 检查Electron渲染进程配置

Electron 12+默认开启contextIsolation（上下文隔离），可能导致Bootstrap JS无法正常操作DOM：

• 临时测试：在BrowserWindow的webPreferences中设置contextIsolation: false，如果下拉恢复正常，说明是上下文隔离的问题。
• 长期解决方案：使用预加载脚本（preload）或调整内容安全策略（CSP），允许Bootstrap脚本运行。例如在HTML头部添加CSP：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">

5. 验证DOM加载顺序

确保Bootstrap JS在DOM加载完成后执行，或者将脚本标签放在</body>标签前，避免DOM未就绪时脚本已运行。

内容的提问来源于stack exchange，提问作者Mohamed Hussein