Zurb Foundation 5 + Rails 4:切换顶栏不起作用 [英] Zurb Foundation 5 + Rails 4 : toggle-topbar won't work

问题描述

我已经尝试了我所知道的一切(尽管很少)，但我无法使顶部栏菜单在小屏幕上正确呈现.我希望菜单减少到小屏幕上的可点击菜单项，基本上是菜单中的响应行为.显然，仅凭以下代码就可以使其工作，但事实并非如此.

<div class="row"><div class="large-12 large-centric small-12 small-centric 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 class="left"><li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li><!-- 其他链接--><ul class="right"><li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li><!-- 其他链接--></节></nav>

</标题>

我认为它与与 Foundation 相关的 javascript 有一些关系，但我不确定它到底是什么.

application.js :

<代码>////= 需要 jquery//= 需要基础//= 需要 jquery_ujs//= 需要涡轮链接//= require_tree .$(document).ready(function() {$(文档).基础();});

应用程序.scss

/***= require_tree .*= require_self*= 需要foundation_and_overrides*/@import '自定义';

custom.scss 文件导入foundation_and_overrides.scss.

解决方案

除了下面的建议，请务必更改

中的 href

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

到 href="" .

我从 http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4

您需要添加

gem 'jquery-turbolinks'

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

按照此更改您的 javascript 清单文件 (application.js) 以按以下顺序运行:

//= 需要 jquery//= 需要 jquery.turbolinks//= 需要 jquery_ujs//= 需要基础//= require_tree .$(function(){ $(document).foundation({});//任何其他代码等//= 需要涡轮链接

这将确保 turbolinks 在其他一切(尤其是在这种情况下的基础)之后运行.

I have tried everything in my knowledge (however little there is), but I can not make the top bar menu render properly on small screens. I want the menu to reduce down to a clickable menu item on small screens, basically responsive behaviour from the menu. Apparently the following code alone should make it work, but it doesn't.

<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>

I think it has something to do with javascript related to Foundation but I'm not sure what it is exactly.

EDIT:

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';

The custom.scss file imports foundation_and_overrides.scss .

解决方案

Besides the suggestion below, make sure to change the href in

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

to href="" .

I've copied the last comment from http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4

You will need to add

gem 'jquery-turbolinks'

to your Gem file then do the usual bundle install

Following this change your javascript manifest file (application.js) to run in the following order:

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

This will ensure turbolinks runs AFTER everything else (especially foundation in this case).

这篇关于Zurb Foundation 5 + Rails 4:切换顶栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！