Electron.js 应用程序：Bootstrap 下拉菜单无法打开

如何解决Electron.js 应用程序：Bootstrap 下拉菜单无法打开

我正在尝试在我的第一个 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"

解决方法

您正在加载内容之前的 bootstrap.js。如果加载脚本时元素不存在于 DOM 中，则不会有任何影响。

Bootstrap Docs 告诉您放置脚本的位置：

... 接近页面末尾，就在结束 0 标记之前，以启用它们。

Bootstrap 4.6.0 下拉菜单在 jQuery 3.6.0 版中无法打开，但在 jQuery 3.5.1 中可以正常工作。我刚试过，确实如此。

尝试将 jQuery 降级到 3.5.1 版。