Rails 4 Foundation Top-Bar Меню не работает

Я использую Rails 4.1.7, Foundation 5.5 и попытался Фонд 5.4.3.2Rails 4 Foundation Top-Bar Меню не работает

Я пошел к странице фонда и попытался пример для верхнего бара навигации

Найдено here и это точный код, используемый в _header.html.erb.

Все работает, за исключением пункта меню, который появляется при уменьшении размера браузера (проверяется на хроме и firefox). Когда я нажимаю элемент, ничего не происходит.

Насколько я понимаю, код примера должен воспроизводить панель навигации, где меню доступно для кликов, и показывает выпадающий список с необходимостью добавления какого-либо кода?

Я создал новое приложение для рельсов, чтобы проверить это.

_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 ay библиотека фундамента называется ..)

Любая помощь очень ценится! Jean

источник

2014-12-23 Jean

У вас есть следующее в js?

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

В самом деле, драгоценный камень фундамента вы используете имеет генератор можно/нужно запустить:

rails g foundation:install

источник

2014-12-24 00:35:52 stephenmurdoch

Да, я сделал это/имею, что в моем файле, как я сказал, все остальные свойства панели работают отлично. – Jean

Я столкнулся с этой проблемой с 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 Перезагрузка сервера.

Это устранило все проблемы с использованием javascripts с основанием, не загружая их, убедившись, что turbolinks работает последним с использованием jquery-turbolinks gem.

источник

2015-03-22 18:20:25 mstewart

Это действительно звучит как проблема javacript/turbolinks.

Я объяснил, как отключить турбо-ссылки, поэтому я связался с более ранним ответом.

Создайте ветку и посмотрите, разрешает ли следующая проблема. Если это так, турбо-ссылки - проблема.

Previous Solution

источник

2015-03-23 13:24:12 Aaron

Я считаю, что проблема является более распространенным, чем просто на верхней панели JavaScript, на самом деле, он участвует все JavaScript Фонда на моей машине. После многих попыток решения без особого успеха, я, наконец, просто начал удалять код, который выглядел неприятным.

После запуска rails g foundation:install и разрешения команды перезаписать основной файл приложения ERB.

В вашем application.html.erb, это изменить ...

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

к этому ...

<%= javascript_include_tag "application" %>

Эта строка кода фиксированной мои фундаментный рельсы gem JS, я надеюсь, что это поможет любому, кто придет сюда в будущем.

источник

2015-10-16 23:23:51 SacWebDeveloper

Rails 4 Foundation Top-Bar Меню не работает

ответ

Смежные вопросы