可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.

Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?

Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs) views/layouts/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();

Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?

Thanks Alex

回答1:

Foundation has known issues with Turbolinks, your issue may be due to that.

To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.

Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .

Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .

If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. ~~I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions.~~ This is not necessarily a certain solution, but it'll guide you in the right direction.

Update: Try this order for importing your javascript assets. And, to quote the source:

Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.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

Note: Look at Alex Aube's answer on this page for additional useful information.

回答2:

Ok. To go along with what Ecnalyr explained. (Which he explained correctly, and I kind of misunderstood for a little bit). This worked for me:

I kept = javascript_include_tag "application" at the end of the body of application.html.erb

application.js is like this:

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

$(document).foundation();

//= require turbolinks

回答3:

This works for turbolinks progressbar and foundation tabs, dropdown links, accordion

//= 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);

回答4:

I recently experienced this issue.

Using jquery.turbolinks didn't fix it. Reordering the requires in the application.js didn't fix it.

Nothing mentioned so far here did the trick.

The solution I found was to move the foundation initializer from application.js to within the body. I just put it below my _nav partial.

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

Foundation 5 Topbar not working consistently in ra

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

Foundation 5 Topbar not working consistently in ra

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮