Ruby-on-rails 为什么我的 Bootstrap 下拉菜单不起作用？

Why is my dropdown menu with Bootstrap not working?

提问by user1483441

In my Rails application, I have the following code for a dropdown menu:

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

In my application.js file I have the following code:

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

    //= require bootstrap

I have no idea why the dropdown menu isn't working, and I have no idea how to fix it. A few days ago, it was working fine, and now it no longer functions properly. Thanks for any help!

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

回答by user1483441

I figured out the answer from this previous StackOverflow question:

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

twitter bootstrap drop down suddenly not working

twitter bootstrap 下拉突然不起作用

I had to put //= require jquery below my line of code that required bootstrap, and then it worked!

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

回答by Brandon Jernigan

I tested your HTML code and it worked fine.

我测试了您的 HTML 代码，效果很好。

First of all, make sure you are loading jQuery first:

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

//= require jquery
//= require bootstrap

Also, you have to call the dropdown via javascript:

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

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

回答by mwangi

The solution lies in the order you import the javascript dependencies.

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

This is what I had initially in my application.js

这是我最初在我的 application.js

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

When I removed bootstrap-sprocketsi my dropdown worked. However, I did not want to remove bootstrap-sprockets. So My new order looked like this;

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

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

Then, to be safe, I had to clean and pre-compile assets by running the following;

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

rake assets:clean
bundle exec rake assets:precompile

This worked for me.

这对我有用。

回答by zloynemec

I've got in the same problem with default Rails and twitter-bootstrap-railsgem installation.

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

Direct call of dropdown initialisation works indeed, but it looks like kind of a workaround for me. So, I continued to search for the answers and was able to find the one that looks more appropriate:

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

I have solved this issue. I add following code in users.js.coffee:

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

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

Solution was found here. Thus, I added this code to app/assets/javascripts/bootstrap.js.coffee, so the final code in it looks like the following:

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

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

And right after this dropdown in navbar started to work exactly as expected.

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

回答by CyberMessiah

I have had this issue for the whole day but was finally able to fix it. I applied the solution above (changing the order) and the dropdown worked. However, I noticed in the console there were errors (Uncaught ReferenceError: jQuery is not defined) due to the fact that bootstrap-sprockets was called before jQuery. I have found a solution that worked for me here

我一整天都遇到这个问题，但终于能够解决它。我应用了上面的解决方案（更改顺序）并且下拉菜单起作用了。但是，我注意到控制台中存在错误（Uncaught ReferenceError: jQuery is not defined），因为 bootstrap-sprockets 在 jQuery 之前被调用。我在这里找到了一个对我有用的解决方案

Basically, I have included the following code below the required items in application.js as:

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

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


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

For me this worked like a charm. Hope that helps somebody!

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

回答by freshmurry

I ran into the same issue and removing //= require bootstrapfrom my application.jsworked for me. I hope this too helps someone!

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