CODEWITHSUNDEEP
twitter-bootstrap
Hersha
Hersha

Reputation: 207

Twitter Bootstrap multiple dropdowns not working

I'm having trouble with Twitter Bootstrap dropdowns. The first dropdown works but every other one doesn't. I found this post: Bootstrap 2.1.1 dropdowns not working properly but this is coded copied directly from the twitter bootstrap site and it worked before i upgraded to 2.0.

Here's a JSFiddle link http://jsfiddle.net/unWCN/

Upvotes: 2

Views: 6752

Answers (2)

Sara
Sara

Reputation: 8242

This appears to be a known bug in Bootstrap 2.1.0 related to the data-target attribute, and will presumably be fixed in the next version.

In the meantime, you can apply one of the user-submitted fixes. This will involve modifying the clearMenus function in js/bootstrap-dropdown.js.

Fix by SoapSeller:

function clearMenus() { 
    $(toggle).parent().removeClass('open')  
}

Fix by erlendfh:

function clearMenus() {
    $(toggle).each(function () {
        getParent($(this)).removeClass("open")
    })
}

I haven't personally tested either of these, but SoapSeller linked before and after jsFiddles that illustrate his solution.

Upvotes: 2

Sherbrow
Sherbrow

Reputation: 17379

The problem resides in your data-target attributes. They should point to a specific dropdown parent, or to # if you use the default markup.

If you set data-target="#" for the dropdown togglers, your code works fine : jsfiddle

Note: if the data-target attribute is not present, the href will be used. Check the plugin doc

Upvotes: 3

Related Questions