css - 单击链接后菜单图标不打开菜单

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'