我在这方面遇到了很多困难,我一直在四处寻找,虽然很多人似乎也有类似的问题,但没有一个修复工作有效.我已经禁用了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中的多个位置,以及菜单>和标记中的几个类的变体.
症状：
在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(); });
解决方法
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
