twitter bootstrap下拉突然不起作用答案

【问题标题】：twitter bootstrap drop down suddenly not workingtwitter bootstrap下拉突然不起作用
【发布时间】：2012-04-30 09:46:42
【问题描述】：

我想知道是否有人可以帮助我。我的引导下拉菜单突然停止工作。我不知道为什么。它以前工作过。我没有触及我的视图我的布局视图，所以我认为问题不存在。我很确定它与我的 javascript 有关，但我不知道它来自哪里。

我的 gem 文件是...

gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'delayed_job_active_record'
gem 'daemons'
gem 'make_voteable'
gem 'admin_data'
gem 'indextank'

而我的 application.js 是...

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-dropdown
//= require bootstrap
//= require_tree .

我猜这可能与我的配置文件有关？

【问题讨论】：

嗯，不太确定，但我认为这与您的 js 相关，您似乎包含 bootstrap-dropdown.js 松散插件以及 bootstrap.js 插件包（附带顺便说一下，所有插件都已经包含了，所以不需要包含松散的插件），已知会导致问题，所以只需删除松散的插件，看看它是否有效。
嗯仍然不起作用。我删除了引导下拉菜单。我要做的就是重启rails服务器才能生效？
我修好了。出于某种原因...//= 要求 jquery 破坏了它
不！但是通过删除我的 jquery，它会破坏我的其他东西。有什么想法吗？
jquery 总是先行，否则你的引导插件将无法工作，所以它是别的东西。你加载的是什么版本的 jquery？

标签： ruby-on-rails drop-down-menu twitter-bootstrap

【解决方案1】：

不得不搬家

//= require jquery

下面

//= require bootstrap

内

application.js

【讨论】：

这是引导程序的错误吗？为什么bootstrap后需要导入jquery？
谢谢，我有 require_tree 导致与我的其他库发生冲突。去掉它会阻止引导 js 工作，但是在将 //= 要求 jquery 移到要求引导下之后一切正常！
这对我也有用，使用 gem 的最新结帐。
这也适用于我，但我现在在引导程序中遇到大量错误（找不到 fn $）
我升级了我的 twitter-bootstrap gem 并且下拉菜单停止工作，移动 jquery 行似乎解决了下拉问题，但是有很多 js 错误。实际上对我有用的是rake assets:clean

【解决方案2】：

如果预编译资产不起作用，请尝试同时删除预编译资产

rake assets:clean

我发现两次加载到资产管道中的下拉 js 似乎会立即打开和关闭下拉菜单，但在 Heroku/Production 中可以正常工作。

【讨论】：

这实际上是为我解决的问题
谢谢！但这对我来说有点不同，我不得不这样做rake assets:clean:all

【解决方案3】：

我遇到了同样的问题，我找到了两种解决方法。

首先，让我告诉你我的设置：我按照引导站点上的说明下载了 bootstrap-dropdown.js。我把它放在资产/javascripts 中。我的 application.js 文件如下所示：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

下拉菜单不起作用。

我注意到在页面源代码中，bootstrap-dropdown.js 的脚本标签出现了两次：（为简洁起见，我删除了不相关的内容）

<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">

所以我从 application.js 中删除了 //= require_tree . 行，重新启动了服务器，下拉菜单工作了！

然后我放回//= require_tree .这一行，而是删除了文件assets/bootstrap-dropdown.js，它再次起作用了！

【讨论】：

这也有帮助。我在开发中预编译了资产，然后进一步的更改以某种方式发生了冲突。删除公共/资产下的文件救了我。我更喜欢这样，而不是在 jquery 之前加载引导程序，这会在控制台中创建警告。
这对我也有用，在 jquery 之后引导并做了 assets:clean 然后再次预编译。
@CraigMcGuff 非常感谢，我被困在这里好几个小时了！
我的情况是加载引导程序两次。
这确实应该是最佳答案。很棒。

【解决方案4】：

我不明白这一点，但重新排序 //= require jquery 和 //= require bootstrap 似乎为我解决了两次问题。正如 Sasha 建议的那样，首先在 jquery 之上移动引导程序修复它。然后我做了更多的工作，准备在 rails 3.2.3 上使用 jruby 进行部署。预编译资产、warble 和下拉菜单在开发和生产中都停止工作。删除 public/assets，以及一些 .class 文件和 tmp 中的文件。没有效果。最后，我将 application.js 中的顺序移回上次失败事件之前的状态，即引导之前的 jquery，并且下拉菜单再次起作用。

对 application.js 的更改是否会触发某些缓存的重建，或者是导致问题根源的某些幕后进程？下次发生这种情况时，我将尝试对 application.js 进行一个简单的更改，看看是否有任何作用。

【讨论】：

【解决方案5】：

我在我的开发机器上遇到了这个问题，但我的生产服务器工作正常。我注意到，虽然在 application.js 中重新排序 js 要求修复了开发中的问题（下拉菜单再次工作），但要小心，因为这会杀死我的下拉菜单在生产中。我不得不回去把它们放回原处，让生产重新开始工作。现在我只是在需要时在 dev 中临时更改它们。

【讨论】：

【解决方案6】：

再次预编译资产解决了我的问题

【讨论】：

【解决方案7】：

我也遇到了这个问题……它与 rails turbolinks 有关。在初始页面加载时，下拉菜单不起作用，但在刷新后它们会起作用。而且，这是因为使用 turbo 链接时，某些 Dom 元素可能不会每次都被加载/重新加载。所以，我的下拉菜单停止工作（除其他外）。 rails 4 对此的修复是添加 jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks。我发现（后来在一些博客中发现）这个 gem 的一件事是 javascript 标记必须在头部内部。自述文件没有提到这一点......但是

【讨论】：

【解决方案8】：

我找到了替代方案！所有这些解决方案都不适合我。我没有在点击时触发下拉菜单，而是在悬停时触发它。放在页面底部的脚本标签中。代码来自：http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-rails/

$(document).ready(function(){
    $('.navbar .dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
    });
n})

【讨论】：

【解决方案9】：

还要确保您的 application.js 中没有 //require bootstrap-sprockets。我已经对此发表了评论，它对我有用。

【讨论】：

【解决方案10】：

见Rails 3.1 Assets - Strange Serving in Development

在 application.js 的调试模式中包含压缩版本的错误

【讨论】：

【解决方案11】：

预编译资产不起作用。在 jquery 在开发中工作但在生产中没有工作之前放置下拉列表删除下拉菜单仍在开发中工作：-O

放置正确的顺序并删除 public/assets 文件夹中的所有内容使其在开发中工作。

【讨论】：

【解决方案12】：

Ticket #5145 最近为此关闭。该修复程序已恢复，但最后提供了一个特定于应用程序的解决方案，并且对我有用。一定要清除你的浏览器缓存。

【讨论】：

【解决方案13】：

将//= require jquery 移动到//= require bootstrap 下方并将gem 'bootstrap-sass' 升级到2.3.0.1，解决了我的问题。

我想添加我上面提到的解决方案，它只适用于 Localhost，但不适用于 Heroku。在我的情况下，解决方案是：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

gem bootstrap-sass, 2.3.0.1

和<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 需要在里面 “_header.html.erb”并从“application.html.erb”中删除。

【讨论】：

【解决方案14】：

我遇到了这个错误，事实证明我的 CSS 阻止了下拉菜单的工作。

特别是我有'溢出：隐藏;'在我的标题导航 CSS 中。删除它解决了问题。

【讨论】：