Rails：引导程序和下拉菜单不起作用答案

【问题标题】：Rails: Bootstrap and dropdown not workingRails：引导程序和下拉菜单不起作用
【发布时间】：2012-08-08 14:46:46
【问题描述】：

在我的 application.html.erb 中，我有以下内容：

<head>
  <title><%= title %></title>
  <%= stylesheet_link_tag "application", media: 'all' %>
  <%= javascript_include_tag "application" %>
  <%= javascript_include_tag "https://js.stripe.com/v1/", "application" %>
  <%= csrf_meta_tags %>
  <%= tag :meta, :name => "stripe-key", :content => STRIPE_PUBLIC_KEY %>
  <%= javascript_include_tag "http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js", "application" %>
  <%= render 'layouts/shim' %>
</head>

在我的 gemfile 中，我有以下内容：

gem 'twitter-bootstrap-rails'
gem 'bootstrap-datepicker-rails'

在我的观点\layouts_header.html.erb 中，我有：

  <li class="dropdown" id="admin_menu">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#admin_menu">
      <%= ADMIN_TITLE %>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <% Admin_menu.each do |menu_text, menu_action| %>
          <li><a href="<%= menu_action %>"><%= menu_text %></a></li>
      <% end %>
    </ul>
  </li>

Admin_menu 在别处定义为： Admin_menu = Hash.new Admin_menu["论文"] = "/论文" Admin_menu["曲目"] = "/曲目" Admin_menu["出席"] = "/出席"

当我点击插入符号时，什么也没有发生。我检查了 HTML 代码，下拉菜单选项在那里。

有什么想法吗？

【问题讨论】：

当您单击下拉菜单时（或在此之前，例如页面加载时）是否出现任何 Javascript 错误？另外，您是否有理由将您的application.js 包含三遍？您在所有javascript_include_tag 调用中都引用了它——您只需要它一次。我很确定这不会导致这个问题，但修复它不会有什么坏处。
是的，你是对的。我清理了 application.js 包含的内容。我没有看到任何 javascript 错误。当我将鼠标悬停在插入符号上时，插入符号从灰色变为黑色，但没有任何反应。当我将鼠标悬停在管理菜单上时，选择器也不会变为手形。
尝试将href="#" 添加到下拉链接本身（具有dropdown-toggle 类的链接）。
将 data-target="#admin_menu" 更改为 href="#admin_menu" 确实产生了变化。当光标悬停在插入符号或管理员上时，它会变为手形，但仍然没有下拉菜单
我也有同样的问题，如果我删除 Stripe 的 <script> 元素，下拉菜单就会开始工作。

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您需要更改这些行：

<%= javascript_include_tag "application" %>
<%= javascript_include_tag "https://js.stripe.com/v1/", "application" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js", "application" %>

到这里：

<%= javascript_include_tag "https://js.stripe.com/v1/" %>
<%= javascript_include_tag "application" %>

你当前的代码多次包含application.js，这是Bootstrap的下拉代码的问题。我敢打赌，如果你查看你的 application.js 文件，你会在顶部附近看到这个：

//= require bootstrap

这意味着您每次包含 application.js 时都会加载一次引导程序，然后再从 github 加载一次。

如果您阅读 Bootstrap 的 Dropdown JS 代码，您会看到它为下拉菜单添加了一个点击侦听器切换。如果您运行此代码两次，您将添加两个点击侦听器。所以每次点击时，这两个听众都会打开菜单，然后又突然关闭。

我遇到了与您类似的问题，我没有注意到我的 Stripe 的javascript_include_tag 也重新包含了application。我猜我们可能是从同一个地方复制/粘贴的！

【讨论】：

它对我来说也包含了两次 javascript。经过一番摸索，我在应用程序布局的底部也发现了一个 javascript_include_tag。
你有没有机会在你的应用程序中包含涡轮链接？我从 application.js 中删除了它，它为我解决了这个问题。
我有一个 bootstrap.js.coffee 文件，它与 application.js 中的 require bootstrap 冲突。很好的收获。
我需要 bootstrap 和 bootstrap-sprockets。在我删除一个后为我工作。谢谢。

【解决方案2】：

使用 Firebug 或 chrome 扩展来检查浏览器中的 html。如果不正确，请尝试使用帮助程序以避免弄乱字符串：

<li><%= link_to menu_text, menu_action %></li>

【讨论】：

在我的问题中，我提到 HTML 很好，下拉菜单选项也在那里。