logo标签列表

Twitter Bootstrap下拉菜单突然无法使用。

ruby-on-railsdrop-down-menutwitter-bootstrap
37

我想知道是否有人能帮助我。我的Bootstrap下拉菜单突然停止工作了。我不知道为什么。以前它一直在工作。我没有更改我的视图或布局，所以我认为问题不在那里。我相当确定它与我的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 .

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

1
嗯，不太确定，但我认为这与你的js有关，你似乎同时包含了bootstrap-dropdown.js松散插件和bootstrap.js插件包（顺便说一下，后者已经包含了所有插件，所以不需要再包含松散插件），这已经被证明会引起问题，所以只需删除松散插件，看看是否有效。 - Andres Ilich
嗯，还是不行。我已经移除了bootstrap-dropdown。我只需要重启Rails服务器，这样更改才能生效，对吧？ - Sasha
我修好了。因为某种原因...//= require jquery 引起了错误。 - Sasha
没有！但是如果我删除了我的jQuery，其他的东西会被破坏。你有什么想法？ - Sasha
好的，我修复了哈哈。我所要做的就是...将 require jquery 移到我的 boostrap 下面。奇怪。有什么想法吗？ - Sasha
4
jQuery必须始终放在前面，这样才能正常运行Bootstrap插件，否则就是其他问题。你正在加载哪个版本的jQuery？ - Andres Ilich
14个回答
108

不得不移动

//= require jquery

以下内容

//= require bootstrap

在...范围内

application.js
6
这是Bootstrap的一个错误吗？为什么需要在引入Bootstrap之后再引入jQuery？ - chourobin
1
那对我也起作用了，使用宝石的最新版本检出。 - Frank
1
这对我也有效，但现在在bootstrap中出现了大量错误（找不到fn $）。 - K2xL
1
我升级了我的twitter-bootstrap gem，下拉菜单停止工作了，移动jquery行似乎修复了下拉问题，但是出现了很多js错误。对我实际起作用的是rake assets:clean。 - Michael
这个解决方案可以工作，但是会产生很多jQuery错误。有没有其他的解决方案来解决这个问题？ - Amit
显示剩余4条评论
21

如果预编译资产无法正常工作，请尝试删除预编译资产。

运行 rake assets:clean

我发现在资源管道中加载下拉 js 两次会导致下拉菜单瞬间打开和关闭，但在 Heroku/生产环境中可以正常工作。

4
谢谢！但是对我来说有些不同，我需要执行rake assets:clean:all命令。 - Sheharyar
12

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

首先，让我告诉你我的设置：我按照bootstrap网站上的说明进行操作，并下载了bootstrap-dropdown.js。我将其放在assets/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文件，然后它再次工作正常！

2
这也帮到我了。我在开发中使用了预编译资产，然后进一步更改造成了某些冲突。删除 public/assets 下的文件为我节省了麻烦。我更喜欢这种方式，而不是先加载 bootstrap，再加载 jquery，会在控制台中创建警告信息。 - allesklar
2
这对我也起作用了，先加载jquery再加载bootstrap，并执行assets:clean清理操作，然后再次进行预编译。 - Craig McGuff
@CraigMcGuff 非常感谢，我在这里卡了好几个小时！ - RedRory
我的情况是加载了两次Bootstrap。 - etlds
这真的应该是最佳答案。非常好。 - Brent Allard
3

我在我的开发机上遇到了这个问题，但是我的生产服务器工作正常。我注意到，在application.js中重新排列js的requires可以解决开发中的问题（下拉框再次起作用），但要小心，因为这会导致我的生产环境中的下拉框失效。我不得不回去把它们放回原来的位置，才能使生产环境恢复正常。目前，当我需要时，我只是暂时在开发环境中对它们进行更改。

3
我不太理解这个问题，但是重新排列 //= require jquery 和 //= require bootstrap 似乎两次都解决了我的问题。首先按照Sasha的建议将bootstrap移到jquery之前，问题得到了解决。然后我做了更多的工作，准备使用jruby on rails 3.2.3部署。预编译资源、制作war包后，在开发和生产环境下下拉菜单均无法正常工作。删除public/assets以及一些.class文件和tmp中的文件也没有效果。最终，我将application.js中的顺序移回到上次失败时的顺序，即在bootstrap之前放置jquery，下拉菜单又可以工作了。
是否对application.js进行修改会触发某些缓存的重建或者一些幕后进程是问题的来源？下次再遇到这种情况，我将尝试在application.js中做一个微不足道的更改，并查看其是否有任何作用。
2
我也遇到了这个问题......它与Rails的Turbolinks有关。在初始页面加载时，下拉框不起作用，但是在刷新后它们会起作用。这是因为使用Turbo Links时，某些Dom元素可能不会每次都被加载/重新加载。所以，我的下拉框停止了一致工作（还有其他事情）。Rails 4的解决方法是添加jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks。我发现一个问题是，这个gem中必须将javascript标签放在head标签内。README没有提到这点...
2
重新预编译资产，解决了我的问题。
1
同时确保你的application.js文件中没有//require bootstrap-sprockets。我注释掉了它，这对我有用。
1
我找到了一种替代方法！所有这些解决方案对我都不起作用。与其让下拉菜单在点击时触发，不如改为在悬停时触发。将代码放在页面底部的脚本标签中。代码来自：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})
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接