为什么我的Bootstrap下拉菜单不能正常工作？

Question

在我的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

我不知道为什么下拉菜单不起作用，也不知道如何修复它。 几天前，它还很正常工作，现在它无法正常运行。 谢谢任何帮助！

- user1483441

---

你从 Twitter Bootstrap 下载了下拉菜单的 JavaScript 文件吗？ - Justin D.

我在你的代码中看到了 data toggle，它应该是 data-toggle 吗？ - Tanzeeb Khalili

可能是推特引导下拉菜单突然无法使用的重复问题。 - Kevin Brown

'turbolinks' 是否已启用？请确保：document.addEventListener("turbolinks:load", function() { // ... }) - Marco

Answer 1

我从之前的 StackOverflow 问题中找到了答案：

twitter bootstrap下拉菜单突然无法使用

我必须在要求引入bootstrap的代码行下面添加//= require jquery，然后它才能正常工作！

- user1483441

---

然后我不得不把它移回去，这也起作用了 :/ 但是其他元素没有。 - Aleks

太好了！我花了2个小时才弄清楚这个问题！谢谢！ - vanboom

@user1483441 这个可以工作，但是正如Aleks所说，其他的jQuery元素无法工作，因为Bootstrap会首先加载并使用jQuery，但此时jQuery尚未加载。 - santosh

Answer 2

我测试了你的HTML代码，它可以正常工作。

首先，请确保你先加载了jQuery：

//= require jquery
//= require bootstrap

此外，您需要通过JavaScript调用下拉菜单：

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

- Brandon Jernigan

---

谢谢您的回复！我应该在哪里使用您给我的JavaScript调用下拉菜单？我将JavaScript添加到头文件中，但它仍然无法工作。 - user1483441

你可以将它添加到application.js的末尾 - 如果你将它添加到头部，那么它会在你的资源之前加载，这样是行不通的。 - Brandon Jernigan

对我来说已经解决了。我在跟着教程做，他们忘记了这一行 :) - user3534641

Answer 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

这个对我有用。

- mwangi

Answer 4

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

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

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

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

解决方案可以在这里找到。因此，我将以下代码添加到app/assets/javascripts/bootstrap.js.coffee中，所以最终的代码如下：

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

在这之后，导航栏中的下拉菜单开始按预期正常工作。

- zloynemec

---

我遇到了一个问题，即在页面刷新时下拉菜单可以完美地工作，但是一旦我导航到另一页，它就会停止工作。我将那一行代码($('.dropdown-toggle').dropdown())添加到bootstrap.js.coffee文件中，事情就像魔法一样奏效了。谢谢！编辑：现在在这里查看（https://dev59.com/V2kv5IYBdhLWcg3w_Vmn#24457190），看起来我的问题可能与TurboLinks有关。无论如何，这对我仍然有效。 - TheBrockEllis

Answer 5

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

- freshmurry

Answer 6

我一整天都在遇到这个问题，但终于解决了。我尝试了上面提供的解决方案（改变顺序），下拉框可以正常工作。但是，我在控制台中发现有错误（未捕获的引用错误：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();
   });

对我来说，这个方法非常有效。希望能帮到其他人！

- CyberMessiah