为什么我的带有 Bootstrap 的下拉菜单不起作用？答案

【问题标题】：Why is my dropdown menu with Bootstrap not working?为什么我的带有 Bootstrap 的下拉菜单不起作用？
【发布时间】：2012-07-28 02:34:13
【问题描述】：

在我的 Rails 应用程序中，我有以下下拉菜单代码：

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
<div class="container">
    <nav>
            <ul class="nav pull-right">
                <li><%= link_to "Home", root_path %></li> 
            <% if signed_in? %>
                <li id="fat-menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data toggle="dropdown">
                        Account <b class="caret"></b>
                    </a>
                <ul class="dropdown-menu">
                        <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                        <li class="divider"></li>
                        <li>
                            <%= link_to "Sign out", signout_path, method: "delete" %>
                        </li>
                    </ul>
                </li>
            <% else %>
                <li><%= link_to "Sign in", signin_path %>
            <% end %>
            </ul>
        </nav>
  </div>
</div>
</header>

在我的 application.js 文件中，我有以下代码：

    //= require bootstrap

我不知道为什么下拉菜单不起作用，也不知道如何修复它。几天前，它工作正常，现在它不再正常工作。感谢您的帮助！

【问题讨论】：

您是否从 twitter bootstrap 下载了下拉 javascript 文件？
我在你的代码中看到data toggle，应该是data-toggle吗？
twitter bootstrap drop down suddenly not working的可能重复
是否启用了“turbolinks”？确保： document.addEventListener("turbolinks:load", function() { // ... })

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

我从上一个 StackOverflow 问题中找到了答案：

twitter bootstrap drop down suddenly not working

我必须将 //= require jquery 放在需要引导程序的代码行下方，然后它就起作用了！

【讨论】：

然后我不得不把它移回来，它也可以工作：/但其他元素没有
耶！我花了2个小时试图弄清楚这一点！谢谢！
@user1483441 它可以工作，但正如 Aleks 所说，其他 jquery 元素无法正常工作，因为引导程序加载拳头并使用 jquery，但当时未加载 jquery

【解决方案2】：

我测试了您的 HTML 代码，它运行良好。

首先，确保您首先加载 jQuery：

//= require jquery
//= require bootstrap

另外，您必须通过 javascript 调用下拉列表：

$('.dropdown-toggle').dropdown()

【讨论】：

感谢您的回复！我应该在哪里用你给我的javascript调用下拉菜单？我将 javascript 添加到我的头文件中，但它仍然无法正常工作。
您可以将其添加到 application.js 的末尾 - 如果您将其添加到标头，那么它将在您的资产之前加载，这将不起作用。
为我修复。正在关注一个教程，他们忘记了这一行:)

【解决方案3】：

解决方案在于您导入 javascript 依赖项的顺序。

这是我最初在 application.js 中的内容

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree

当我删除 bootstrap-sprockets 时，我的下拉菜单起作用了。但是，我不想删除bootstrap-sprockets。所以我的新订单看起来像这样；

//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

然后，为了安全起见，我必须通过运行以下命令来清理和预编译资产；

rake assets:clean
bundle exec rake assets:precompile

这对我有用。

【讨论】：

【解决方案4】：

我在默认 Rails 和 twitter-bootstrap-rails gem 安装中遇到了同样的问题。

直接调用下拉初始化确实有效，但对我来说似乎是一种解决方法。于是，我继续寻找答案，找到了一个看起来更合适的答案：

我已经解决了这个问题。我在 users.js.coffee 中添加以下代码：

jQuery ->
  $('.dropdown-toggle').dropdown()

找到了解决方案here。因此，我将此代码添加到 app/assets/javascripts/bootstrap.js.coffee，因此其中的最终代码如下所示：

jQuery ->
  $("a[rel~=popover], .has-popover").popover()
  $("a[rel~=tooltip], .has-tooltip").tooltip()
  $('.dropdown-toggle').dropdown()

在导航栏中的这个下拉菜单开始完全按预期工作之后。

【讨论】：

我遇到了一个问题，下拉菜单在页面刷新时可以完美地找到，但是一旦我导航到另一个页面，它就会停止工作。我在bootstrap.js.coffee 文件中添加了一行（$('.dropdown-toggle').dropdown()），事情就像一个魅力。谢谢！编辑：现在看here 看起来我的问题可能与 TurboLinks 相关。无论哪种方式，这仍然对我有用。

【解决方案5】：

我整天都遇到这个问题，但终于能够解决它。我应用了上面的解决方案（更改顺序）并且下拉菜单有效。但是，我注意到在控制台中存在错误（未捕获的 ReferenceError：jQuery 未定义），因为 bootstrap-sprockets 在 jQuery 之前被调用。我找到了适合我的解决方案here

基本上，我在 application.js 中的必需项下面包含了以下代码：

   //= require jquery
   //= require tether
   //= require jquery_ujs
   //= require bootstrap
   //= require bootstrap-sprockets
   //= require turbolinks
   //= require_tree .


   $(document).ready(function(){
       $('.dropdown-toggle').dropdown();
   });

对我来说，这就像一个魅力。希望对某人有所帮助！

【讨论】：

【解决方案6】：

我遇到了同样的问题，从我的 application.js 中删除 //= require bootstrap 对我有用。我希望这也能帮助别人！

【讨论】：