Question

我正在使用Rails 4和Foundation 4开发一个应用程序。我正在使用Foundation 4中的顶栏导航元素，当显示很小时，它会在菜单图标中隐藏菜单。

我遇到的问题是我只能在首次加载页面时切换菜单（直接转到它或重新加载它之后）。如果我点击任何链接，菜单将停止工作，直到刷新页面。

如果我打开Chome的调试器，我发现

Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.

谷歌搜索似乎表明它是Chrome中的一个错误，但Firefox不起作用，我的手机也不行。

这是顶栏的代码

<nav class="top-bar">
<ul class="title-area">
    <li class="name">
        <h1><%= link_to "My App",root_path %></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
  <% if signed_in? %>
    <li class="divider hide-for-small"></li>
    <li><%= link_to "My Account", account_path %></li>
    <li class="divider"></li>
  <% end %>

  <li class="divider show-for-small"></li>
  <li class="has-form">
    <% if signed_in? %>
      <%= link_to "Sign Out", signout_path, class: "button", method: "delete" %>
    <% else %>
            <%= link_to "Sign In", signin_path, class: "button" %>
    <% end %>
  </li>
</ul>
</section>
</nav>

有关如何使这项工作的任何想法？我没有改变顶杆的任何css，我使用的是Foundation 4.3.1

Answer 1

事实证明这是由Rails 4.0中的TurboLinks引起的

我发现此页面http://blog.joshsoftware.com/2013/06/28/troubleshooting-turbolinks-with-rails-4/讨论了解决方案。

我的application.js文件看起来像

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

$(document).foundation();
$(function(){ $(document).foundation(); });

//= require_tree .
//= require turbolinks

我必须将以下行添加到我的Gemfile

gem 'jquery-turbolinks'

单击链接后，菜单图标无法打开菜单

1 个答案: