Question

Here’s my problem, i’m trying to help a friend with a twitter bootstrap update – specifically the nav bar.
When I click an item that has a drop down menu the menu does not open.

My problem is that the dropdown menu will not open. My investigation shows that bootstrap’s javascript is applying the open class to the wrong ul, and there fore the drop down never appears.

I have followed the instructions on http://twitter.github.com/bootstrap/javascript.html#dropdowns to set it all up. As far as I can see it is all setup correct.

I have exported a custom bootstrap which has the dropdown in it.

the page runs without error in the javascript console.

From my investigations, I have found that when you click “Print” (which has a dropdown), it will actually go to ul.level-0.nav and add the class “open”. This is a problem because it actually needs to apply that class to a.dropdown-menu.

See the structure here:

ul.level-0.nav
   li.dropdown
       a.dropdown-toggle
       ul.dropdown-menu

So to replicate the problem,

Step 1: http://jsfiddle.net/uGGgS/1/ in chrome

Step 2: Open up your chrome object inspector (or firebug if you are in firefox, or if you are in IE, then go download chrome and slap yourself for using IE)

Step 3: Drill down to li.haschild.dropdown a:contains('print')

Step 4: Click the Print menu item, and notice that the ul.level-0.nav now has the class “open”. Also notice no dropdown menu is shown 🙁

Step 5: add the class open to the ul.dropdown-toggle underneath print and notice the dropdown appears.

Anyone here know what I am doing wrong? I’ve done a w3c validate on the page and it had no errors that indicated the html page had unclosed tags.

Thanks.

Answer 1

From my test i noticed that the older version of the bootstrap.min.js being included in your document is conflicting with your markup and updating it to the latest fixes the issue.