Rails 4 Foundation頂欄菜單不起作用
[英]Rails 4 Foundation Top-Bar Menu not working
問題描述
我正在使用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>
我試圖在網上尋找答案，但是沒有找到任何最新討論，並且發現的所有解決方案都對我不起作用（禁用渦輪鏈接，更改基礎庫的調用方式..）
任何幫助是極大的贊賞！ 吉恩
4 個解決方案
解決方案1
4 2015-03-22 18:20:25
我遇到了帶有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無法加載的問題。
解決方案2
0 2014-12-24 00:35:52
您的js中有以下內容嗎？
//= require foundation
$(document).foundation();
實際上，您正在使用的基礎gem具有可以/應該運行的發電機：
rails g foundation:install
解決方案3
0 2015-03-23 13:24:12
這聽起來確實像javacript / turbolinks問題。
我已經解釋了如何禁用渦輪鏈接，因此我鏈接到了較早的響應。
創建一個分支，然后查看是否可以解決問題。 如果確實如此，則問題在於渦輪鏈接。
解決方案4
0 2015-10-16 23:23:51
我相信這個問題不僅限於頂級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.1和Zurb Foundation 5
[英]Top bar dropdowns not working with Rails 4.1 and Zurb Foundation 5
基金會響應式頂部欄切換在Rails 3.2.8項目中不起作用
[英]Foundation Responsive Top Bar Toggle Not Working In Rails 3.2.8 Project
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.