Ruby-on-rails twitter bootstrap 下拉突然不起作用

twitter bootstrap drop down suddenly not working

提问by Sasha

i was wondering if someone could help me. my bootstrap drop down menu suddenly stopped working. i have no idea why. it was working before. i didn't touch my views my layouts views so i think the problem is not there. im pretty sure it has to do with my javascript but i dont know where its coming from.

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

my gem file is...

我的宝石文件是...

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'

and my application.js is...

我的 application.js 是...

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

im guessing maybe it has to do with my config files somehow?

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

回答by Sasha

had to move

不得不搬家

//= require jquery

below

以下

//= require bootstrap

within

之内

application.js

回答by tw airball

if precompiling assets does not work try also removing precompiled assets

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

rake assets:clean

rake assets:clean

I found that dropdown js being loaded twice into the asset pipeline seems to open and close the dropdown menu instantly, but would work fine in Heroku/Production.

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

回答by Julian Mann

I had the same problem and I found 2 ways to fix it.

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

First, let me tell you my set up: I followed the instructions at the bootstrap site, and downloaded bootstrap-dropdown.js. I put it in assets/javascripts. My application.js file looks like this:

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

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

Dropdowns didn't work.

下拉菜单不起作用。

I noticed in the page source that a script tag for bootstrap-dropdown.js appeared twice: (I've removed the irrelevant stuff for brevity)

我注意到在页面源代码中，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">

So I removed the line //= require_tree .from application.js, restarted the server, and the dropdown worked!

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

Then I put back the line //= require_tree .and instead removed the file assets/bootstrap-dropdown.js, and again it worked!

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

回答by user1780909

I was experiencing this on my development machine but my production server worked fine.. I noticed that while reordering the js requires in the application.js fixes the problem in development (dropdowns work again), be careful as this killed my dropdowns in production. I had to go back and put them back the way they were to get production working again. For now I am just temporarily changing them in dev when I need to.

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

回答by Jim Ehrlich

I don't understand this, but reordering //= require jquery and //= require bootstrap has seemed to fix the problem twice for me. First moving bootstrap above jquery as Sasha suggests fixed it. Then I did more work and prepared to deploy using jruby on rails 3.2.3. Precompile assets, warble, and the dropdowns quit working both in development and production. Delete public/assets, as well as some .class files and files in tmp. No effect. Finally I moved the order in application.js back to what it had been before the last failure episode, i.e. jquery before bootstrap, and dropdowns work again.

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

Could an alteration to application.js be triggering a rebuild of some cache, or some process behind the scenes that is the source of the problem? Next time this happens, I will try a trivial change to application.js and see if that does anything.

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

回答by goodkat

Precompiling the assets again fixed the problem for me

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

回答by hellion

I had this problem too...and it was related to rails turbolinks. On initial page load the drop downs would not work, but after a refresh they would. And, this is because with turbo links some Dom elements might not get loaded/reloaded every time. So, my drop down stopped working consistently (among other things). The rails 4 fix for this is to add the jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks. One thing with this gem that I found (and later came across in some blog) is that the javascript tag must be inside the head. The README does not mention this...but

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

回答by user2968401

I found a alternative! all of these solutions didnt work for me. Instead of having the dropdown triggered on click, I had it trigger on hover instead. put on bottom of page in script tags. code from: http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-rails/

我找到了替代品！所有这些解决方案都不适合我。我没有在点击时触发下拉菜单，而是在悬停时触发它。放在页面底部的脚本标签中。代码来自：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})

回答by Julian Arango López

Also make sure that you don't have //require bootstrap-sprocketsinside your application.js. I have commented that and it worked for me.

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

回答by bimgate

Moving //= require jquerybelow //= require bootstrapand upgrading gem 'bootstrap-sass', to 2.3.0.1, solved my problem.

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

I want to add that solution which i mentioned above works only on Localhost but not on Heroku. Solution for both in my case was:

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

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

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

gem bootstrap-sass, 2.3.0.1

gem bootstrap-sass, 2.3.0.1

and <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>needs to be inside "_header.html.erb" and delete from "application.html.erb" .

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