Question

我正在使用Rails 4.1.7，Foundation 5.5并尝试使用Foundation 5.4.3.2

我去了基金会页面并尝试了顶栏导航的例子

可以找到here，并且是_header.html.erb中使用的确切代码。

一切正常，除了缩小浏览器大小时显示的菜单项（在chrome和firefox上试过）。当我点击该项目时没有任何反应。

我的理解是示例代码应该重现一个导航栏，其中菜单是可点击的，并显示必须添加任何代码的下拉列表？

我创建了一个新的rails应用程序，只是为了测试它。

_header.html.erb partial：

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

的Gemfile：

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.7'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 4.0.3'
gem 'sass-rails', github: 'rails/sass-rails', branch: 'master'
gem 'sass', '~> 3.3.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby
gem 'foundation-rails', '~> 5.4.3.1'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

application.html.erb文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

  <body data-no-turbolink>
    <%= render 'layouts/header' %>
    <div class="row">
    <div class="small-8 columns"><%= yield %></div>
    <div class="small-4 columns"><p>Test</p></div>
  </div>
  </body>  
</html>

我尝试在线寻找答案，但没有找到任何最近的讨论，我找到的所有解决方案都不适合我（禁用turbolinks，改变基础库的调用方式..）

非常感谢任何帮助！让

Answer 1

我使用turbolinks gem遇到了这个问题，并为rails 4.2.0和基础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 重启服务器。

通过使用jquery-turbolinks gem确保turbolinks最后运行，解决了基础javascripts未加载的所有问题。

Answer 2

你的js中有以下内容吗？

//= require foundation
$(document).foundation();

事实上，你使用的基础宝石有一个你可以/应该运行的生成器：

rails g foundation:install

Answer 3

这听起来像是一个javacript / turbolinks问题。

我已经解释了如何禁用turbo-links，所以我链接到了之前的响应。

创建分支并查看以下内容是否解决了问题。如果是这样，turbo-links就是问题所在。

Previous Solution

Answer 4

我认为问题比顶级条形码JavaScript更广泛，事实上，它涉及我的机器上的所有Foundation的JavaScript。在尝试了许多解决方案但没有取得多大成功后，我终于开始删除看起来很麻烦的代码。

运行<table id="mytable"> <tr> <td></td> <td align="center">A</td> <td align="center">B</td> </tr> <tr> <td>1</td> <td> <input type="checkbox" /> </td> <td> <input type="checkbox" /> </td> </tr> <tr> <td>2</td> <td> <input type="checkbox" /> </td> <td> <input type="checkbox" /> </td> </tr> </table> <div id="output"></div>并允许命令覆盖主应用程序ERB文件。

在您的application.html.erb中，更改此内容...

rails g foundation:install

到此......

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

这一行代码修复了我的基础 - rails gem JS，我希望这可以帮助将来来这里的任何人。

Rails 4 Foundation Top-Bar菜单无效

4 个答案: