How to hide Twitter Bootstrap dropdown

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:

1. It doesn't have a way to load content into it with AJAX.
2. 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'});
3. It uses CSS3 animations to animate (which looks very nice) but in non-CSS3 browsers it just shows, which doesn't look that nice; Facebox uses JavaScript to fade in so it works in all browsers.

Solution 1:

Try this:

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

This may also work for you:

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

Solution 2:

tryed out most the options from here but none of them realy worked for me. (the $('.dropdown.open').removeClass('open'); did hide it, but if you moused over before clicking anything else it showed up again.

so i endet up doing it whith a $("body").trigger("click")

Solution 3:

$('.open').removeClass('open');

Bootstrap 4 (October 2018):

$('.show').removeClass('show');