引导下拉菜单在电子中不起作用答案

【问题标题】：bootstrap dropdown not working in electron引导下拉菜单在电子中不起作用
【发布时间】：2016-10-15 17:51:24
【问题描述】：

使用 Angular JS 构建电子应用程序。我在主屏幕上安装了一个引导导航菜单，除了下拉导航项目外，它运行良好，单击时它们不会下拉。代码本身是来自引导站点的导航示例的复制和粘贴。

这是我的 package.json

{
 "name": "testapp",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": {
   "start": "electron ."
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
"   electron-prebuilt": "^1.2.2"
 },
 "dependencies": {
 "angular": "^1.5.6",
  "angular-route": "^1.5.6",
  "bootstrap": "^3.3.6"
 }

}

我通过 NPM 安装了引导程序。在 main.html 的头部，我从 node_module 文件夹中调用 css。

在正文标签下面我有我的脚本声明：

 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/angular-route/angular-route.min.js"></script>
 <script src="js/app.js"></script>

同样，其他不是下拉菜单的导航项目效果很好。为什么下拉菜单在这里不起作用？

感谢您的反馈。

【问题讨论】：

你的window开发工具有什么错误吗？
没有错误，只是没用。

标签： angularjs twitter-bootstrap-3 electron

【解决方案1】：

我刚刚遇到了同样的问题。解决方案非常简单。只是忘记正确初始化 JQuery onLoad。

在你的 html 文件中做这样的事情：

<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

不必为此单独添加下拉代码。

【讨论】：

【解决方案2】：

不知道为什么，但似乎我必须添加显式引导下拉代码。我将 dropdown.min.js 添加到我的 bootstrap/dist/js 文件夹中，然后在我调用主 bootstrap.min.js 时在我的 main.html 中引用，现在下拉导航项工作。

我假设下拉代码在主 bootstrap.js 文件中？我想知道是否必须将下拉 js 作为单独的文件包含在内是一种常见的做法？

【讨论】：

【解决方案3】：

下拉菜单（在 Bootstrap 中）基于第三方库 (Popper.js) 构建，该库提供动态定位和视口检测。一定要在 Bootstrap 的 JavaScript 之前包含 popper.min.js

从https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js下载源代码

将其保存到您的项目文件夹，然后在 HTML 代码中导入：

应该可以的

【讨论】：