Zurb Foundation 5 + Rails 4：toggle-topbar无法使用

Question

我已经尽我所能尝试了所有操作（但是很少），但是我无法使顶部栏菜单在小屏幕上正确呈现。 我希望菜单减少到小屏幕上可单击的菜单项，基本上是菜单的响应行为。 显然，仅下面的代码应该可以使它起作用，但事实并非如此。

<header>
      <div class="row">
        <div class="large-12 large-centered small-12 small-centered columns">
          <nav class="top-bar" data-topbar role="navigation">
            <section class="top-bar-section">
                <ul class="title-area">
                  <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
                </ul>
                <ul class="left">
                  <li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li>
                  <!-- other links -->    
                </ul>
                <ul class="right">
                    <li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li>
                    <!-- other links -->
                </ul>  
            </section>
          </nav>      
      </div>
    </div>
</header>

我认为这与与Foundation相关的javascript有关，但是我不确定它到底是什么。

编辑：

application.js：

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


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

application.scss

/*
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

 */

@import 'custom';

custom.scss文件导入foundation_and_overrides.scss。

Answer 1

除了以下建议外，请务必更改

<ul class="title-area">
     <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

到href =“”。

我已经从http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4复制了最后一条评论

您将需要添加

宝石'jquery-turbolinks'

到您的Gem文件，然后执行通常的捆绑安装

之后，将您的javascript清单文件（application.js）更改为按以下顺序运行：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation({});
// any other code etc
//= require turbolinks

这将确保Turbolink在其他所有内容之后运行（在这种情况下尤其是基础）。