2014-12-23 57 views
1

我使用Rails 4.1.7,基金会5.5,并试图基金会5.4.3.2轨道4基金会顶栏菜单不工作

我去基金会页,并试图为顶级导航栏中的例子

可以找到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: :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,改变w唉基础库被称为..)

任何帮助非常感谢! Jean

回答

0

你的js中有以下几项吗?

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

事实上,你正在使用的基础上的宝石有一台发电机,你可以/应该运行:

rails g foundation:install 
+0

是的,我做到了/在我的文件中有这个,正如我所说的酒吧的其他所有属性都是完美的。 – Jean

4

我就遇到了这个问题与turbolinks宝石,发现这个解决方案钢轨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 重新启动服务器。

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

0

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

我已经解释了如何禁用涡轮链接,所以我链接到了早期的响应。

创建一个分支,看看下面是否解决了这个问题。如果是这样,涡轮链接是问题。

Previous Solution

0

我相信问题不仅仅是最上面一栏更广泛的JavaScript,实际上,它涉及到所有基金的JavaScript的我的机器上。在尝试了许多解决方案但没有取得太大成功之后,我终于开始删除看起来很麻烦的代码。

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

在你application.html.erb,改变了...

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

这个...

<%= javascript_include_tag "application" %>

的这一行代码固定我的基金会护栏宝石JS,我希望这有助于任何未来的人。