Rails 4 Foundation顶栏菜单不起作用

Question

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

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

可以在这里找到，它是_header.html.erb中使用的确切代码。

除了缩小浏览器大小时显示的菜单项（在chrome和firefox上尝试过）之外，其他所有内容都可以正常工作。 当我单击该项目时，没有任何反应。

我的理解是示例代码应该在菜单可单击的位置复制导航栏，并显示下拉菜单，而无需添加任何代码？

我创建了一个新的Rails应用程序只是为了对其进行测试。

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

宝石文件：

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>

我试图在网上寻找答案，但是没有找到任何最新讨论，并且发现的所有解决方案都对我不起作用（禁用涡轮链接，更改基础库的调用方式..）

任何帮助是极大的赞赏！ 吉恩

Answer 1

我遇到了带有Turbolinks gem的问题，并找到了适用于Rails 4.2.0和Foundation 5.5.1的解决方案。

在您的gemfile中：gem'jquery gem 'jquery-turbolinks'

在命令行上： bundle install

然后在您的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重新启动服务器。

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

Answer 2

您的js中有以下内容吗？

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

实际上，您正在使用的基础gem具有可以/应该运行的发电机：

rails g foundation:install

Answer 3

这听起来确实像javacript / turbolinks问题。

我已经解释了如何禁用涡轮链接，因此我链接到了较早的响应。

创建一个分支，然后查看是否可以解决问题。 如果确实如此，则问题在于涡轮链接。

先前的解决方案

Answer 4

我相信这个问题不仅限于顶级JavaScript，而且还涉及我机器上所有Foundation JavaScript的问题。 在尝试了许多解决方案并没有取得很大成功之后，我终于开始删除看起来很麻烦的代码。

在运行rails g foundation:install ，允许该命令覆盖主应用程序ERB文件。

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

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

为此...

<%= javascript_include_tag "application" %>

这两行代码修复了我的基础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