Foundation 5 的手风琴不适用于 Rails 4 [英] Foundation 5's accordion not working with Rails 4

问题描述

当我按照文档使用它并直接打开该页面时，Foundation 5 的手风琴效果很好.但是，如果我点击我网站上的另一个链接，然后点击带有手风琴的页面，那么当我点击标题时，手风琴不会展开:(.我想可能是 turbolinks JavaScript 搞乱了 Foundation 的手风琴.所以我们将此添加到带有手风琴的页面的链接中:

Foundation 5's accordion works great when I use it as per the documentation and open that page directly. However, if I click to another link on my site and then click to the page with the accordion, then the accordion doesn't expand when I click on the headings :(. I figured maybe it's the turbolinks JavaScript messing with Foundation's accordion. So we added this to the link to the page with the accordion:

<li data-no-turbolink><%= link_to 'My accordion page', accordion_page_path %></li>

现在它更好，但并不完美.如果我从另一个页面转到我的手风琴页面，手风琴会起作用.但是当我离开并单击浏览器上的后退按钮时，停止工作:(.

Now it works better, but not perfect. If I go to my accordion page from another page, the accordion works. But then when I navigate away and click the back button on my browser, stops working :(.

这一定是一个非常普遍的问题，因为 Foundation 和 Rails 非常流行.有什么办法可以让它发挥作用?

This must be an extremely common problem as Foundation and Rails are very popular. Any way to get this to work?

推荐答案

是的，turbolinks 会导致许多 RoR 问题.

Yes, turbolinks can cause many issues with RoR.

turbolinks 破坏您的 javascript 的原因是 document.ready 事件不会正确触发.您需要在更改时执行此操作.

The reason turbolinks breaks your javascript is that document.ready events won't trigger properly. You need to do it on change instead.

选项 1. 修改所有 Javascript(不容易或不推荐)

Option 1. Revise all of the Javascript (Not easy or recommend)

var on_load = function() { 
}
$(document).ready(on_load)
$(window).bind('page:change', on_load)

选项 2. 使用 Jquery-Turbolinks gem.

Option 2. Use the Jquery-Turbolinks gem.

jquery turbolinks gem 旨在解决这个问题.但是，您需要阅读文档，并确保正确安装它.(这是一个棘手的野兽.)

The jquery turbolinks gem is designed to get around this problem. However, you need to read the docs, and make sure to install it properly. (It's a tricky beast.)

选项 3. 删除 Turbolinks

Option 3. Remove Turbolinks

如果它给您带来很多麻烦，您可以将其删除.从 gemfile 中删除它，从应用程序布局中的资产中删除 turbolinks-tracked: true，然后和 turbolinks 说再见.我承认，我已经这样做过好几次了.:

If it's causing you to much trouble, you can just remove it. Delete it from the gemfile, remove turbolinks-tracked: true from your assets in the application layout, and wave turbolinks goodbye. I will admit, I have done this several of times. :

这篇关于Foundation 5 的手风琴不适用于 Rails 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！