使用 JHipster 设置后菜单未在浏览器中下拉答案

【问题标题】：Menus not dropping down in browser after setup with JHipster使用 JHipster 设置后菜单未在浏览器中下拉
【发布时间】：2016-03-27 20:56:05
【问题描述】：

我一直在使用JHipster Mini Book 来学习 AngularJS 和 Spring Boot，但我在本书开头的第 14 页遇到了一个障碍。到目前为止，我已经运行了“yo jhipster”，创建了一个 PostgreSQL 数据库，并使用“bower install bootstrap-material-design --save”和“gruntwiredep”安装材料设计，并使用书中描述的配置编辑。当我运行“gradlew bootRun”时，一切都启动了，我可以浏览到“http://127.0.0.1:8080”并得到书中图2所示的预期页面。

问题是下拉菜单不下拉，即使我登录后也是如此。

我正在使用带有 node.js 5.2.0、npm 3.5.1、bower 1.7.0 和 jhipster 2.26.1 的 Windows 8.1。还有 PostgreSQL 9.4.5。我还必须安装 Visual Studio Express 2015（带有更新 1）和所有相关文件，以便 node.js 可以工作。更不用说 Python 2.7.1。我已经解决了https://github.com/nodejs/node-gyp/issues/629#issuecomment-153196245 和Unable to Connect to GitHub.com For Cloning 中提到的问题

我使用 Google Chrome（版本 47.0.2526.106 m）和 Internet Explorer（11.0.9600.18098）进行测试。我已经检查了两个浏览器都允许使用 JavaScript，并且其他 JS 密集型网站也可以工作。

我多次重新创建该项目，所以我认为我没有遗漏任何步骤。

由于我是 AngularJS 新手，我不知道这是 JHipster 问题还是我的环境有问题。

我还能在哪里寻找问题？

2015 年 12 月 22 日更新

上面提到的JHipster书的第13页，第13页有运行指令

bower install bootstrap-material-design --save

紧随其后

grunt wiredep

这会在 src\main\webapp\index.html（以及其他文件）中添加一些行

<script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>

其中第一个是问题 - 当我删除它时，一切似乎都可以正常工作（除非我没有测试所有东西，所以以后可能会发现问题）。我不知道那个 .js 文件有什么问题。

【问题讨论】：

Windows 上的前端开发是如此痛苦，请查看我在 jhipster env 上的答案stackoverflow.com/questions/34399362/…
打开浏览器的控制台，可能有错误
@GaëlMarziou Google Chrome 或 Internet Explorer 的开发者控制台中没有错误。
您是只运行 gradle 还是按照 jhipster.github.io/development.html 中的建议同时运行 gradle 和 grunt？然后通过localhost:3000 访问您的应用程序？
@GaëlMarziou 我只运行“gradlew bootRun”并导航到127.0.0.1:8080。我尝试只运行“grunt serve”，但从localhost:3000 根本不起作用。我没有意识到我注定要同时运行两者。我会尽快尝试。

标签： twitter-bootstrap jhipster bootstrap-material-design

【解决方案1】：

这是因为你使用了 bootstrap-material-design 库，所以关于带有 bootstrap 的导航栏的下拉菜单有一些演变。如果你想修复它，2个解决方案：

不要使用 bootstrap-material-design（如您所说）
如果您想使用 bootstrap-material-design，您需要在 navbar.html 文件中修复一些 html。更多信息在这里：https://stackoverflow.com/questions/34281965/material-design-theme-menu?answertab=oldest#tab-top

【讨论】：

【解决方案2】：

您是否在 index.html 中运行？

<script type="text/javascript">
     $.material.init() 
</script>

【讨论】：

是的，我按照书中的所有说明进行操作。