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

you can use this code in your current event handler

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

in my scenario I used when ajax call complete

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Answer 2

Selecting by attribute is the slow way. Here is the most fast solution to hide the opened dropdown:

$(".dropdown-menu.show").parent().dropdown("toggle");

or use following, if the .dropdown-menu is not the next children element (find the closest parent dropdown control):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Answer 3

This is what worked for me:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Answer 4

Hey this simple jQuery trick should help.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Answer 5

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")

Answer 6

Try to open HTML with Bootstrap Modal, I use this code:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

and the link is like this:

<a href="#my_page" data-toggle="modal">PAGE</a>