单击链接后菜单图标未打开菜单答案

【问题标题】：Menu icon does not open menu after clicking a link单击链接后菜单图标未打开菜单
【发布时间】：2013-08-31 20:26:08
【问题描述】：

我正在使用 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

【问题讨论】：

标签： css responsive-design ruby-on-rails-4 zurb-foundation turbolinks

【解决方案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'

【讨论】：