Rails 4 Foundation顶栏菜单不起作用

Question

I am using Rails 4.1.7, Foundation 5.5 and tried Foundation 5.4.3.2 我正在使用Rails 4.1.7，Foundation 5.5并尝试过Foundation 5.4.3.2

I went to the Foundation Page and tried the example for the top-bar navigation 我去了基金会页面并尝试了顶部导航的示例

Can be found here and is the exact code used in _header.html.erb. 可以在这里找到，它是_header.html.erb中使用的确切代码。

Everything is working, except for the menu item that shows up when decreasing the size of the browser (tried on chrome and firefox). 除了缩小浏览器大小时显示的菜单项（在chrome和firefox上尝试过）之外，其他所有内容都可以正常工作。 When I click the item nothing happens. 当我单击该项目时，没有任何反应。

My understanding was that the example code should reproduce a navigation bar where menu is clickable and shows the dropdown with having to add any code? 我的理解是示例代码应该在菜单可单击的位置复制导航栏，并显示下拉菜单，而无需添加任何代码？

I created a new rails app just to test this out. 我创建了一个新的Rails应用程序只是为了对其进行测试。

_header.html.erb partial: _header.html.erb部分：

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

I tried looking for the answer online but did not find anything recent discussion and all the solutions I found did not work for me (disabling turbolinks, changing the way the foundation library is called..) 我试图在网上寻找答案，但是没有找到任何最新讨论，并且发现的所有解决方案都对我不起作用（禁用涡轮链接，更改基础库的调用方式..）

Any help is greatly appreciated! 任何帮助是极大的赞赏！ Jean 吉恩

Answer 1

I ran into this issue with the turbolinks gem and found this solution for rails 4.2.0 and foundation 5.5.1. 我遇到了带有Turbolinks gem的问题，并找到了适用于Rails 4.2.0和Foundation 5.5.1的解决方案。

In your gemfile: gem 'jquery-turbolinks' 在您的gemfile中：gem'jquery gem 'jquery-turbolinks'

On the command line: bundle install 在命令行上： bundle install

then in your application.js: //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks 然后在您的application.js中： //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks Restart server. //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks重新启动服务器。

This fixed all the issues with the foundation javascripts not loading by making sure turbolinks runs last using the jquery-turbolinks gem. 通过使用jquery-turbolinks gem确保turbolinks最后运行，解决了所有基础javascript无法加载的问题。

Answer 2

Do you have the following in your js? 您的js中有以下内容吗？

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

In fact, the foundation gem you are using has a generator you can/should run: 实际上，您正在使用的基础gem具有可以/应该运行的发电机：

rails g foundation:install

Answer 3

This really sounds like a javacript/turbolinks issue. 这听起来确实像javacript / turbolinks问题。

I've explained how to disable turbo-links already, so I linked to an earlier response. 我已经解释了如何禁用涡轮链接，因此我链接到了较早的响应。

Create a branch and see if the following solves the problem. 创建一个分支，然后查看是否可以解决问题。 If it does, turbo-links is the issue. 如果确实如此，则问题在于涡轮链接。

Previous Solution 先前的解决方案

Answer 4

I believe the problem is more widespread than just the top bar JavaScript, in fact, it involved all of Foundation's JavaScript on my machine. 我相信这个问题不仅限于顶级JavaScript，而且还涉及我机器上所有Foundation JavaScript的问题。 After trying many solutions without much success, I finally just started removing code that looked troublesome. 在尝试了许多解决方案并没有取得很大成功之后，我终于开始删除看起来很麻烦的代码。

After running rails g foundation:install and allowing the command to overwrite the main application ERB file. 在运行rails g foundation:install ，允许该命令覆盖主应用程序ERB文件。

In your application.html.erb, change this... 在您的application.html.erb中，更改此...

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

to this... 为此...

<%= javascript_include_tag "application" %>

This single line of code fixed my foundation-rails gem JS, I hope this helps anyone who comes here in the future. 这两行代码修复了我的基础rails gem JS，希望这对以后来这里的人有所帮助。

Rails 4 Foundation顶栏菜单不起作用

问题描述

4 个解决方案

解决方案1
4 2015-03-22 18:20:25

解决方案2
0 2014-12-24 00:35:52

解决方案3
0 2015-03-23 13:24:12

解决方案4
0 2015-10-16 23:23:51

Rails 4 Foundation顶栏菜单不起作用

问题描述

4 个解决方案

解决方案1 4 2015-03-22 18:20:25

解决方案2 0 2014-12-24 00:35:52

解决方案3 0 2015-03-23 13:24:12

解决方案4 0 2015-10-16 23:23:51

解决方案1
4 2015-03-22 18:20:25

解决方案2
0 2014-12-24 00:35:52

解决方案3
0 2015-03-23 13:24:12

解决方案4
0 2015-10-16 23:23:51