How to hide Twitter Bootstrap dropdown

Question

This is getting annoying — when I click on an item in a Bootstrap dropdown, the dropdown doesn't close. I have it set up to open a Facebox lightbox when you click the dropdown item but there is a problem with it. What I have tried When the item is clicked, I tried doing this: ``` $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); ``` That hides it, but then for some reason it won't open again. As you can see I really need the dropdown to close, because it looks crappy when it stays open (mainly because the `z-index` of the dropdown is higher than the Facebox modal box overlay. Why I'm not using Bootstrap's built-in modal box If you're wondering why I'm not using the nice-looking modal box built into Bootstrap, it is because: - It doesn't have a way to load content into it with AJAX. - You have to type HTML each time for the modal; with Facebox you can do a simple: `$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});` - It uses CSS3 animations…

Accepted Answer

Try this:

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

This may also work for you:

```
$('[data-toggle="dropdown"]').parent().removeClass('open');
```

How to hide Twitter Bootstrap dropdown

Solution

Problem