我在这方面遇到了很多困难，我一直在四处寻找，虽然许多人似乎也有类似的问题，但没有任何修复工作有效。我已经禁用了turbolinks，我没有运行其他的javascript或css样式。
我正在使用Rails 4.1，Ruby 2.0.0和foundation-rails 5.4.3。
css样式本身似乎工作正常，按钮显示为按钮，顶部栏布局和外观是预期的，但下拉菜单不起作用。我一直在搞乱这个问题，以至于我最终创建了一个全新的，完全空的测试应用程序，使用基本的脚手架来测试它，但仍然不能使用下拉列表。
我尝试过一些事情，包括移动$（function（）{$（document）.foundation（）;}）;将application.js文件放入application.html中的标记中，将javascript标记移动到application.html中的多个位置，以及菜单中的几个类别
< / p>
症状：
在Chrome上测试：
当屏幕缩小时，下拉菜单完全没有响应，菜单按钮根本不起作用。
在Firefox / IE上进行测试：
如果单击它们，下拉列表实际上会下降，但不会悬停。嵌套下拉列表仍无法正常工作，当我点击下拉列表中的任何内容时，它会消失。缩小屏幕时，菜单按钮根本不起作用。
这就是我所做的：
rails new foundationtest
rails g scaffold item name:text description:text --skip-stylesheets
rake db:migrate
然后我添加了基础轨道，并从我的gemfile中删除了turbolinks并运行：
bundle
rails g foundation:install
我接受了所有默认值，然后进入了application.js文件并从中删除了“// = require turbolinks”。
现在看来，这就是我所拥有的。
application.html：
<!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" %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#">Top Bar Title </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">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active"><a href="#">Main Item 1</a></li>
<li class="divider"></li>
<li><a href="#">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">Main Item 3</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
<ul class="dropdown">
<li><label>Dropdown Level 2 Label</label></li>
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><label>Dropdown Level 3 Label</label></li>
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">Main Item 4</a>
<ul class="dropdown">
<li><label>Dropdown Level 1 Label</label></li>
<li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><label>Dropdown Level 1 Label</label></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="has-form">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
<a href="#" class="alert button">Search</a>
</div>
</div>
</form>
</li>
<li class="divider show-for-small"></li>
<li class="has-form">
<a class="button" href="#">Button!</a>
</li>
</ul>
</section>
</nav>
<%= yield %>
<%= javascript_include_tag "application" %>
</body>
</html>
application.js：
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
答案 0 :(得分：1)
我在类似的事情上挣扎，发现Chrome JS控制台说$(document).foundation();不是一个功能。
在Chrome视图源中打开呈现的HTML后，我想也许所有正在加载的不同JS文件都会让浏览器感到困惑。
无论如何，我最终从require_tree .删除了application.js，并且顶部栏终于工作了。 Rails 4.10和Foundation 5.
答案 1 :(得分：0)
我的项目中遇到了同样的问题，以下解决方案对我有用，你可以尝试一下。
您必须将此代码放在<head>代码中。
<script src="js/vendor/jquery.js"></script>
<script src="http://foundation.zurb.com/docs/assets/js/all.js"></script> 您还可以下载此all.js文件并将其放入网页的<head>标记中。
答案 2 :(得分：0)
我已经迁移到Rails 4.1 / Foundation 5的Rails 3.2 / Foundation 4应用程序中有完全相同的症状（下拉菜单根本不起作用，缩小宽度菜单按钮根本不起作用）。此外，透露模态并没有透露。
问题似乎是来自旧应用的foundation_and_overrides.scss文件。当我用一个全新的应用程序生成的foundation_and_overrides.scss替换它时，问题都得到了解决。
还有一些注意事项表明，某些不太旧版本的foundation_and_overrides.scss可能存在问题。
不知道这是不是你的问题，但我肯定会尝试确保你拥有最新版本的基础 - 轨道宝石（我有5.4.3.1），生成一个新的rails应用程序，生成基础文件，并尝试将新应用中的foundation_and_overrides.scss复制到您遇到问题的应用中。
答案 3 :(得分：0)
我在使用Foundation 5使用Wordpress主题时遇到了类似的问题。一切都是正确的，我的topbar设置如何。我通过从overflow:hidden CSS规则中移除.top-bar来结束下拉工作。