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

Here is my solution on how to close the button dropdown and toggle the button :

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Where "this" is a global container of the button group.

Answer 2

The easist way:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Answer 3

Don't know if this will help anyone (maybe it is too specific to my case, and not to this question) but for me this worked:

$('.input-group.open').removeClass('open');

Answer 4

Try this:

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

This may also work for you:

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

Answer 5

It may have been added in retrospect (though, that feature is not documented, even in Bootstrap 4.3.1), but you can simply call it with a hide parameter. Just make sure to call it on the toggler element. Like so:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Of course, this also works in reverse with show.

Answer 6

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');