Ruby on Rails和Zurb Foundation Offcanvas無法正常工作

我剛剛將Boot UI中的ui（Rails 4）從Bootstrap移動到了Foundation 5. 我添加了一個用於大屏幕的常規導航和用於小屏幕的Offcanvas導航。在這裏查看更多詳情：http://foundation.zurb.com/docs/components/offcanvas.html Ruby on Rails和Zurb Foundation Offcanvas無法正常工作

當我點擊菜單offcanvas導航顯示所有鏈接，然後我可以點擊內容，再次打開導航，但是，當我點擊導航中的鏈接，然後，我無法打開offcanvas導航，它看起來像被阻止，我必須在瀏覽器中手動刷新我的視圖。

這裏是我的代碼：

<!DOCTYPE html> 
<html lang="de"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title> 

    <%= stylesheet_link_tag 'application'%> 
    <%= javascript_include_tag 'vendor/modernizr' %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 
    <!-- NAVIGATION Top Bar --> 
    <!------------------------> 
    <div class="off-canvas-wrap"> 
     <div class="inner-wrap"> 
      <div class="contain-to-grid sticky fixed"> 
       <nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false"> 
        <ul class="title-area"> 
        <li class="name"> 
         <h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1> 
        </li> 
        </ul> 
        <section class="top-bar-section"> 
        <!-- Right Nav Section --> 
        <ul class="right"> 
         <li class="has-dropdown active"> 
         <a href="#"><%=t('.menus')%></a> 
         <ul class="dropdown"> 
          <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li> 
         </ul> 
         </li> 
         <li class="has-dropdown"> 
         <a href="#"><%=t('.changelanguage')%></a> 
         <ul class="dropdown"> 
          <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li> 
          <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li> 
         </ul> 
         </li> 
        </ul> 

        <!-- Left Nav Section --> 
        <ul class="left"> 
         <li class="has-form"> 
         </li> 
        </ul> 
        </section> 
       </nav> 
      </div> 

      <!-- NAVIGATION Offcanvas --> 
      <!--------------------------> 
      <div class="fixed show-for-small"> 
      <nav class="tab-bar"> 

       <section class="left tab-bar-section"> 
       <h1 class="title"><%= t('.siteTitle') %></h1> 
       </section> 

       <section class="right-small"> 
       <a class="right-off-canvas-toggle menu-icon" ><span></span></a> 
       </section> 

      </nav> 
      </div> 

      <aside class="right-off-canvas-menu"> 
       <ul class="off-canvas-list"> 
       <li><label class="first">Newolu</label></li> 
       <li><<%= link_to 'Home', root_path, :id => 'newolu' %></li> 
       </ul> 

       <hr> 

       <ul class="off-canvas-list"> 
       <li><label><%=t('.menus')%></label></li> 
       <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li> 
       </ul> 

       <hr> 

       <ul class="off-canvas-list"> 
       <li><label><%=t('.changelanguage')%></label></li> 
       <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li> 
       <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li> 
       </ul> 
      </aside> 

      <!-- Content --> 
      <!-------------> 
      <section class="main-section"> 
       <!-- Notice --> 
       <!------------> 
       <% if notice %> 
        <div data-alert class="alert-box info radius"> 
        <p id="notice"><%= notice %></p> 
        <a href="#" class="close">&times;</a> 
        </div> 
       <% end %> 
       <!-- content goes here --> 
       <%= yield %> 
      </section> 

      <a class="exit-off-canvas" href="#"></a> 
     </div> 
    </div> 
    <%= javascript_include_tag 'application' %> 
</body>

沒有人知道爲什麼會出現這個問題呢？我的第二個問題是，以下代碼片段中的文本不是左對齊的，而是位於中心。當我將它改爲正確或中間時，它在相同位置上加上減號。

<section class="left tab-bar-section"> 
      <h1 class="title"><%= t('.siteTitle') %></h1> 
      </section>

這裏是圖像：

image

希望有人能幫助.. 非常感謝您

來源

2013-11-26 damir

添加數據沒有的TurboLink標誌包含您鏈接，它會禁用該鏈接觸發一個完整的重裝turbolinks標籤。我只是在iOS上測試它。無需停用整個渦輪鏈接寶石。 <div data-no-turbolink><a href="/link"></a></div>這應該這樣做。

來源

2013-11-28 15:27:27

這個解決方案更優雅。謝謝 – damir

問題已與turbolinks寶石，這是能夠做到在新的Rails項目中默認。有了這個寶石，整個頁面不會被加載，只有一些內容（由Rails智能標識）。檢查Railscast。

要解決此問題，將會導致應用程序運行速度變慢，您現在將在每次點擊鏈接時看到整個頁面刷新。儘管如此，只需從您的基地application.js刪除（或評論，直到有修復）turbolinks導入。

從這： //= require turbolinks

爲了這個：// require turbolinks

來源

2013-11-27 15:56:48

感謝您的幫助。 – damir

愛德華的回答比較好，以前沒有在文檔中找到那些東西！ –

是的..我也沒有:) – damir

我遇到了turbolinks gem的這個問題，並發現這個解決方案適用於rails 4.2.0和foundation 5.5.1。

在你的Gemfile： gem 'jquery-turbolinks'

在命令行： bundle install

重新啓動服務器，然後在您的application.js： //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks

這種固定所有與問題通過確保turbolinks運行最後使用jquery-turbolinks gem來加載基礎javascripts。

來源

2015-03-22 18:03:03 mstewart

Ruby on Rails和Zurb Foundation Offcanvas無法正常工作

回答

相關問題