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 drop down suddenly not working

我不得不把// =需要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

这对我有用。

Answer 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()

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

Answer 5

我一整天都遇到过这个问题，但终于能够解决它了。我应用了上面的解决方案（更改顺序）和下拉列表工作。但是，我注意到在控制台中有错误（Uncaught ReferenceError：jQuery未定义），因为在jQuery之前调用了bootstrap-sprockets。我找到了一个适合我的解决方案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();
   });

对我而言，这就像一个魅力。希望能帮助别人！

Answer 6

我遇到了同样的问题，并从//= require bootstrap移除application.js为我工作。我希望这对某人也有帮助！

为什么我的Bootstrap下拉菜单不起作用？

6 个答案: