11

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

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

4

6 回答 6

11

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

twitter bootstrap下拉突然不起作用

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

于 2012-07-28T18:48:37.177 回答
8

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

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

//= require jquery
//= require bootstrap

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

$('.dropdown-toggle').dropdown()
于 2012-07-28T05:12:18.367 回答
5

解决方案在于您导入 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

这对我有用。

于 2016-08-18T19:11:13.613 回答
3

我在默认 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()

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

于 2015-03-28T14:17:33.917 回答
0

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

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

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


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

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

于 2017-02-21T15:41:53.913 回答
0

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

于 2017-08-24T17:34:34.697 回答