[英]Zurb Foundation 5 + Rails 4 : toggle-topbar won't work
我已經盡我所能嘗試了所有操作(但是很少),但是我無法使頂部欄菜單在小屏幕上正確呈現。 我希望菜單減少到小屏幕上可單擊的菜單項,基本上是菜單的響應行為。 顯然,僅下面的代碼應該可以使它起作用,但事實並非如此。
<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。
除了以下建議外,請務必更改
<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在其他所有內容之后運行(在這種情況下尤其是基礎)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.