Electron.js 应用程序：引导下拉菜单不会打开答案

【问题标题】：Electron.js app: Bootstrap dropdown menu won't openElectron.js 应用程序：引导下拉菜单不会打开
【发布时间】：2021-06-10 18:37:24
【问题描述】：

我正在尝试在我的第一个 Electron.js 应用程序中使用 Bootstrap。下拉按钮确实出现了，但是当我单击该按钮时菜单本身并没有出现。我怀疑我在应用中添加 Bootstrap 和 jQuery 的方式有问题。

这是我的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Magic</title>
    <script>let $ = require('jquery');</script>
    <script>require('popper.js');</script>
    <script>require('bootstrap');</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>

    <img src="../assets/true.png">

    <h1>Magic Demo!</h1>
    <p>Welcome to the most magical demo ever!</p>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle"
              type="button"
              id="dropdownMenu2"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>

  </body>
</html>

我通过 npm 添加了 Bootstrap、jQuery 和 Popper.js，这是我的相关部分package.json:

"dependencies": {
    "bootstrap": "^4.6.0",
    "electron-log": "^4.3.2",
    "electron-squirrel-startup": "^1.0.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1"
  },

另外，我发现在 Electron DevTools 上，我得到了错误： "Uncaught ReferenceError: require is not defined"

【问题讨论】：

这能回答你的问题吗？ Client on Node.js: Uncaught ReferenceError: require is not defined

标签： jquery bootstrap-4 electron package.json

【解决方案1】：

您在内容之前加载 bootstrap.js。如果加载脚本时元素在 DOM 中不存在，则将无效。

Bootstrap Docs 告诉您将脚本放置在哪里：

... 在您的页面末尾附近，就在结束 </body> 标记之前，启用它们。

【讨论】：

谢谢，我把所有的脚本标签都放在了底部，但这并没有什么不同。

【解决方案2】：

Bootstrap 4.6.0 下拉菜单无法在 jQuery 版本 3.6.0 中打开，但在 jQuery 3.5.1 中可以正常工作。我刚试了一下，是真的。

尝试将 jQuery 降级到 3.5.1 版。

【讨论】：