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 dropd

Answer 1

Try this!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

OR

$(clicked_element).trigger("click");

It always work for me.

Answer 2

Reading the documentation and using JavaScript it could be done using the toggle method:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

You can read about it in: http://getbootstrap.com/javascript/#dropdowns-methods

Answer 3

The easiest way to do this is: you add a hide label:

<label class="hide_dropdown" display='hide'></label>

then everytime you want to hide dropdown, you call:

$(".hide_dropdown").trigger('click');

Answer 4

The selected answer didn't work for me, but I'm thinking it's because of the newer version of Bootstrap. I ended up writing this:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Hopefully that's helpful to someone else in the future.

Answer 5

After click:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Answer 6

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

Bootstrap 4 (October 2018):

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