Jquery Ruby on Rails和Zurb基金会画布不能正常工作 < >我刚刚从引导到基础5移动了UI（Rails 4）。我为大屏幕添加了普通导航，为小屏幕添加了非画布导航。有关更多详细信息，请参见此处：_Jquery_Html_Css_Ruby On Rails_Zurb Foundation

Jquery Ruby on Rails和Zurb基金会画布不能正常工作 < >我刚刚从引导到基础5移动了UI（Rails 4）。我为大屏幕添加了普通导航，为小屏幕添加了非画布导航。有关更多详细信息，请参见此处：

jquery html css ruby-on-rails zurb-foundation

Jquery Ruby on Rails和Zurb基金会画布不能正常工作 < >我刚刚从引导到基础5移动了UI（Rails 4）。我为大屏幕添加了普通导航，为小屏幕添加了非画布导航。有关更多详细信息，请参见此处：,jquery,html,css,ruby-on-rails,zurb-foundation,Jquery,Html,Css,Ruby On Rails,Zurb Foundation,当我点击菜单时，offcanvas导航显示所有链接，然后我可以点击内容，再次打开导航，但是，当我点击导航中的链接时，我无法打开offcanvas导航，看起来它被阻止了，我必须在浏览器中手动刷新我的视图以下是我的代码： <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-

当我点击菜单时，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>




'newolu'>





“餐厅”%>




'en'}，：id=>en'>
'de'}，：id=>de'>

有人知道为什么会出现这个问题吗？我的第二个问题是，下面代码段中的文本没有左对齐，而是在中间。当我把它改为右边或中间时，它在同一位置上是正负的

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

这是一张图片：

希望有人能帮忙。。

非常感谢

这个问题与

turbolinks

gem有关，它在新的Rails项目中默认启用。使用这个gem，不会加载整个页面，只加载一些内容（由Rails智能识别）。检查一下

若要修复此问题，将导致应用程序速度变慢，现在您将在单击的每个链接上看到整个页面刷新。不过，只需从您的基本

application.js

中删除

turbolinks

导入（或在修复之前进行注释）

由此：

/=需要TurboLink

为此：

//需要turbolink

将数据无turbolink标志添加到包含链接的标记，它将禁用该链接的turbolink，从而触发完全重新加载。我刚刚在ios上测试过。不需要禁用整个Turbink的宝石。<代码> <代码>。应该这样做。< /P> < P>我用TurbLink的宝石进入这个问题，找到了Rails 4.2.0和基础5.5.1./P>的解决方案。在您的文件中：


gem“jquery turbolinks”

在命令行上：


捆绑安装

重新启动服务器，然后在application.js中：


//=需要jquery
//=需要jquery.turbolinks
//=需要jquery\u ujs
需要基础
//=需要一棵树。
$（函数（）{$（文档）.foundation（）}）；
//=需要涡轮链路

这固定了基础JavaScript不加载的所有问题，确保Turburink使用jQuery Turburink宝石运行。

爱德华的答案更好，以前没有在文档中找到这些东西！