Javascript 顶杆吊杆不与Rails 4.1和ZURB基金会5一起使用_Javascript_Html_Css_Ruby On Rails_Zurb Foundation

Javascript 顶杆吊杆不与Rails 4.1和ZURB基金会5一起使用

javascript html css ruby-on-rails zurb-foundation

Javascript 顶杆吊杆不与Rails 4.1和ZURB基金会5一起使用,javascript,html,css,ruby-on-rails,zurb-foundation,Javascript,Html,Css,Ruby On Rails,Zurb Foundation,我在这方面遇到了很多困难，我一直在四处寻找，虽然很多人似乎都有类似的问题，但没有一个修复方案有效。我已经禁用了TurboLink，并且没有运行其他javascript或css样式我使用的是Rails 4.1、Ruby 2.0.0和foundation Rails 5.4.3 css样式本身似乎工作正常，按钮显示为按钮，顶栏布局和外观与预期一致，但下拉菜单不起作用。长期以来我一直在搞这个，最终我创建了一个全新的，完全空的测试应用程序，带有基本的脚手架来测试它，但是下拉列表仍然无法工作我尝试了一

我在这方面遇到了很多困难，我一直在四处寻找，虽然很多人似乎都有类似的问题，但没有一个修复方案有效。我已经禁用了TurboLink，并且没有运行其他javascript或css样式

我使用的是Rails 4.1、Ruby 2.0.0和foundation Rails 5.4.3

css样式本身似乎工作正常，按钮显示为按钮，顶栏布局和外观与预期一致，但下拉菜单不起作用。长期以来我一直在搞这个，最终我创建了一个全新的，完全空的测试应用程序，带有基本的脚手架来测试它，但是下拉列表仍然无法工作

我尝试了一些方法，包括移动$（function（）{$（document.foundation（）；}）；在application.js文件中，将javascript标记移动到application.html中的多个位置，以及菜单

和标记中类的多个变体

症状：

铬的测试：

下拉菜单完全没有响应，当屏幕缩小时，菜单按钮根本不起作用

在Firefox/IE上测试：

如果单击下拉列表，它们实际上会下拉，但不会悬停。嵌套下拉列表仍然不起作用，当我单击下拉列表中的任何内容时，它就会消失。当屏幕缩小时，菜单按钮根本不起作用

以下是我所做的：

rails new foundationtest
rails g scaffold item name:text description:text --skip-stylesheets
rake db:migrate

然后，我将foundation rails添加到我的gemfile中，并从中删除TurboLink，然后运行：

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 &rarr;</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 &rarr;</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>

我在我的项目中也遇到了同样的问题，下面的解决方案适合我，你可以试试这个

您必须将此代码放入

标记中

你也可以下载这个代码>所有.js<代码>文件，并把它放在你的网页的<代码> <代码>标签中。

我在一个Rails 3.2／基础4应用程序中，我已经迁移到Rails 4.1／基金会5，完全相同的症状（下拉菜单根本不起作用，宽度菜单按钮不起作用）。此外，揭示情态动词不具有揭示性

问题似乎是来自旧应用程序的foundation_和_overrides.scss文件。当我用全新应用程序生成的foundation_和_overrides.scs替换它时，问题都得到了解决

还有一些注意事项是，一些不太旧的foundation_和_overrides.scss版本可能存在问题

不知道这是不是你的问题，但我一定要确保你有最新版本的基础栏目GEM（我有5.4.3.1），生成一个新的Rails应用程序，生成基础文件，然后尝试将新应用程序中的foundation_和_overrides.scs复制到您遇到问题的应用程序中。

我也遇到了类似的问题，发现Chrome JS控制台说

$（document）.foundation（）不是一个函数
在Chrome view源代码中打开呈现的HTML后，我想可能加载的所有不同的JS文件都让浏览器感到困惑
无论如何，我最终从application.js
中删除了require\u树。
，topbar终于工作了。Rails 4.10和基础5。<在使用WordPress主题使用基金会5时，我遇到了类似的问题。我的顶栏设置都是正确的。我通过从中删除溢出：隐藏来结束下拉列表的工作。顶栏
CSS规则。@Tal Bull-如果答案有用，请单击“correct”或放弃“upvote”，这样可以帮助其他人找到正确的解决方案。我将这些添加到head标签中，但没有任何更改。我实际上就是这样做的，我创建了一个全新的，零配置应用程序，并没有什么，而是产生一个基本的测试脚手架，安装基础宝石，禁用TurbLink，然后复制在一个来自基金会网站的NavaBar示例，仍然没有。在启用TurboLink的情况下重试了另一个全新的测试ap，但仍然没有任何更改。这是基础rails 5.4.3，在您的示例中，这是一个非常复杂的顶栏。当我使用你显示的顶部条形html代码（在我的“新”应用程序中）时，我会得到与你相同的结果——下拉菜单和菜单按钮都不起作用。但是，当我从中粘贴第一个示例顶部栏时，它们确实起作用。所以问题一定是你的顶级条形码html代码。我会尝试使用示例顶栏，看看它是否适用于您，如果适用，则开始移植您自己的顶栏功能，直到您导入所有这些功能，或者找到破坏功能的更改。
// 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(); });