Rails 4 Foundation Top-Bar菜单不起作用
我使用的是Rails 4.1.7、Foundation 5.5和试用的Foundation 5.4.3.2
我转到Foundation Page并尝试了顶部栏导航的示例
可以在here中找到，并且是_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>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: :developmentapplication.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，更改基础库的调用方式。)
任何帮助都是非常感谢的！吉恩
回答 4
Stack Overflow用户
发布于 2015-03-23 02:20:25
我在turbolinks gem中遇到了这个问题，并在rails 4.2.0和foundation 5.5.1中找到了这个解决方案。
在您的gemfile中：gem 'jquery-turbolinks'
在命令行上：bundle install
然后在您的重启服务器中：//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks application.js。
通过确保turbolinks最后使用jquery-turbolinks gem运行，修复了所有基础javascripts无法加载的问题。
Stack Overflow用户
发布于 2014-12-24 08:35:53
你的js里有没有以下内容？
//= require foundation
$(document).foundation();事实上，您正在使用的foundation gem有一个您可以/应该运行的生成器：
rails g foundation:installStack Overflow用户
发布于 2015-03-23 21:24:12
这听起来确实像是javacript/turbolinks的问题。
我已经解释了如何禁用加速链接，所以我链接到了一个较早的回复。
创建一个分支，看看下面的方法是否能解决问题。如果是这样的话，turbo-links就是问题所在。
https://stackoverflow.com/questions/27629358
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号