Foundation 5 Topbar 在 Rails 4 中无法始终如一地工作答案

【问题标题】：Foundation 5 Topbar not working consistently in rails 4Foundation 5 Topbar 在 Rails 4 中无法始终如一地工作
【发布时间】：2014-01-22 20:15:18
【问题描述】：

我在我的 rails 4 应用程序中使用 Foundation 5。当我发送请求时，顶栏菜单工作正常。我可以悬停项目和嵌套项目没有问题。然后，我单击其中一个项目，它有一个与之关联的 link_to 方法。有时它会给出正确的结果，我的菜单仍然可以完美运行，但有时整个事情都会冻结。这也使移动菜单的后退按钮消失。一旦我通过刷新或 url 发送新请求，菜单就会再次起作用。

Rails 在日志文件中没有发现任何问题。我的菜单在铁轨之外运行良好。我想知道这是否与我的 link_to tag_helpers 或我在应用程序中设置基础的方式有关？

这里是关于如何为基础路由 JS 的快速概述。（他们在他们的文档中建议的配置）视图/布局/application.html.erb：

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <%= stylesheet_link_tag    "application" %>
 <%= javascript_include_tag "vendor/modernizr" %>
</head>   
<body>     
  <%= javascript_include_tag "application" %>     
</body>

assets/application.js：

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(document).foundation();

还有其他人遇到过这个问题吗？除了不使用基础 5 之外还有什么好的解决方案吗？

谢谢亚历克斯

【问题讨论】：

标签： javascript ruby-on-rails drop-down-menu ruby-on-rails-4 zurb-foundation

【解决方案1】：

Foundation 已知 Turbolinks 存在问题，您的问题可能是由于该问题。

要解决此问题，您可以禁用 Turbolinks 并查看顶部栏是否仍有问题。

这是一个简单的指南：http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4。

除此之外，如果您必须拥有 Turbolinks，那么 Turbolinks 就是问题所在。您可以尝试添加 jquery turbolinks，如下所示：https://github.com/kossnocorp/jquery.turbolinks。

如果问题仍然存在，下一步是检查您导入 javascript 文件的顺序（这对这些 Turbolinks / Foundation 问题很重要），您可能会对此感到满意。 ~~我没有确切的顺序让你把它们放进去，但是如果你搜索“Turbolinks Foundation”问题，你最终会偶然发现一些解决方案。~~这不一定是一个特定的解决方案，但它'会指引你正确的方向。

更新：试试这个顺序来导入你的 javascript 资产。并且，引用source：

将所有要加载的 Javascript 放入标记中很重要。包含 jQuery 的顺序很重要——确保在 turbolinks 之前和 jquery 之后加载 jquery.turbolinks。在 application.js 中包含 jquery-turbolinks.js 和 turbolinks.js 之间的所有自定义 js

// app/assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos

//= require turbolinks

注意：查看此页面上的Alex Aube's answer 以获取更多有用信息。

【讨论】：

谢谢。我也遇到了同样的问题，然后就成功了。
@vanda 具体哪一部分对你有帮助？
我实际上删除了 turbolinks 以进行故障排除。顺便说一句，我在 Firefox 26 上的 turbolinks 没有这个问题。这个问题发生在我的 chrome 中
@vanda 对于任何想知道的人来说，我也只在 Chrome 中遇到过问题。 Foundation 4 和 Rails 4 / Turbolinks 也是如此。包括 jquery turbolinks 和调整顺序为我自己修复了之前的那些问题。
@AlexAube 我更新了问题以包含示例订单。

【解决方案2】：

好的。同意 Ecnalyr 的解释。（他解释正确，我有点误解了）。这对我有用：

我在 application.html.erb 正文的末尾保留了= javascript_include_tag "application"

application.js 是这样的：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .

$(document).foundation();

//= require turbolinks

【讨论】：

太棒了。这解决了我的问题

【解决方案3】：

这适用于 turbolinks 进度条和基础选项卡、下拉链接、手风琴

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

var ready;
ready = function() {
  $(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);

【讨论】：

适用于下拉链接。谢谢！
为我解决了这个问题，似乎比添加 jquery.turbolinks 更干净

【解决方案4】：

我最近遇到了这个问题。

使用 jquery.turbolinks 并没有解决它。重新排序 application.js 中的需求并没有解决它。

到目前为止，这里没有提到任何东西。

solution I found 将基础初始化程序从 application.js 移动到正文中。我只是把它放在我的 _nav 部分下面。

<script>
  $(document).foundation();
</script>

【讨论】：