Question

使用Angular JS构建电子应用。我在主屏幕上安装了一个bootstrap导航菜单，除了下拉导航项外，它们完美地运行，点击后它们不会下拉。代码本身是来自bootstrap站点的nav样本的复制和粘贴。

这是我的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安装了bootstrap。在我的main.html的头部，我从node_module文件夹中调用了css。

在body标签下面，我有我的脚本声明：

 <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>

同样，其他不是下拉列表的导航项工作效果很好。为什么下拉菜单不起作用？

感谢您的反馈。

Answer 1

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

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

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

不必单独添加下拉代码。

Answer 2

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

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

Answer 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代码：

应该起作用

引导下拉不在电子中工作

3 个答案: