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

Question

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

dam*_*mir 2 html css jquery ruby-on-rails zurb-foundation

我刚刚将我的ui(Rails 4)从Bootstrap移动到了Foundation 5.我为大屏幕添加了一个普通的Nav,为小屏幕添加了一个Offcanvas Navigation.有关详细信息,请参阅此处:http://foundation.zurb.com/docs/components/offcanvas.html

当我点击菜单时,offcanvas导航显示所有链接,然后我可以点击内容,再次打开导航,但是,当我点击导航中的链接,然后,我无法打开offcan世界导航,它看起来就像它被阻止一样,我必须在浏览器中手动刷新我的视图.

这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

有谁知道为什么会出现这个问题？我的第二个问题是,以下代码片段中的文本未对齐左侧,它位于中心.当我将它改为右边或中间时,在同一位置加上减去.

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

Run Code Online (Sandbox Code Playgroud)

这是一张图片:

图片

希望有人可以帮助..非常感谢你

Answer 1

小智 6

将data-no-turbolink标志添加到包含您链接的标记中,它将禁用该链接的turbolinks,从而触发完全重新加载.我刚刚在ios上测试过它.无需禁用整个turbolinks宝石.<div data-no-turbolink><a href="/link"></a></div>这应该做到这一点.

Answer 2

小智 5

问题与turbolinksgem有关,gem在新的Rails项目中默认启用.有了这个gem,整个页面都没有加载,只有一些内容(由Rails智能识别).检查Railscast.

要解决此问题,将导致应用程序变慢,现在您将在单击的每个链接上看到整页刷新.然而,只需删除(或评论,直到有修复)turbolinks从您的基地导入application.js.

由此: //= require turbolinks

对此: // require turbolinks

归档时间：	12 年，3 月前
查看次数：	1544 次
最近记录：	10 年，12 月前