为什么我的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

我不知道为什么下拉菜单不起作用,我不知道如何解决它.几天前,它工作正常,现在它不再正常运行.谢谢你的帮助!

Answer 1

我想出了之前StackOverflow问题的答案:

twitter bootstrap下降突然无法正常工作

我不得不把// =需要jquery放在我需要bootstrap的代码行下面,然后就可以了!

Answer 2

我测试了你的HTML代码,它工作得很好.

首先,确保首先加载jQuery:

//= require jquery
//= require bootstrap

此外,您必须通过javascript调用下拉列表:

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

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

这对我有用。