Twitter Bootstrap drop down menu not working

Question

I know there are a lot of questions like this on Stack Overflow and I\'ve looked at them but my dropdown menu still isn\'t working.

Here\'s my code:

Answer 1

I had a similar problem. And the cause was the wrong order of js files in head tag. Correct order is the jquery.min.js first than bootstrap.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Answer 2

For anyone still experiencing this problem. I found that I was including the bootstrap js files twice (I had split my header, body and footer files and had not realised I was including them both in the footer and header.

Might help someone.

Answer 3

In my case, there was a component over my drop down button, and it took too long for I take note. Noob error, but it may helps somebody.

Answer 4

In my case the problem was with version of jQuery. In bootstrap.js v3.3.6

if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
  }

Note: 'Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3'

I replaced the code of local jQuery file with jQuery-1.11.3.js and it starts working.

Hope it will work for you as well.

Answer 5

Check if you have this in js files: $('.dropdown-toggle').dropdown();

Check if you have something like this with this sequence:

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>

check this: Bootstrap drop-down menus and tabbable tabs on Docpad

Answer 6

Adding this in my ready function fixed the problem for me

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