Why is my dropdown menu with Bootstrap not working?

Question

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

  

&l         


        
                      

              相关标签:
       
      

Answer 1

I figured out the answer from this previous StackOverflow question:

twitter bootstrap drop down suddenly not working

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

Answer 2

I ran into the same issue and removing //= require bootstrap from my application.js worked for me. I hope this too helps someone!

Answer 3

I tested your HTML code and it worked fine.

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

//= require jquery
//= require bootstrap

Also, you have to call the dropdown via javascript:

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

Answer 4

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

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:

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:

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.

Answer 5

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

This is what I had initially in my application.js

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

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

//= 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.

Answer 6

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

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

   //= 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!