twitter bootstrap dropdown doesn't toggle closed when it should

Question

Oh man, I\'ve been tearing my hair out over this. 4 hours on a dropdown.

I\'m using Twitter Bootstrap.

The fixed nav at the top has a dropdown, pretty standard s

Answer 1

Nothing worked for me, except this:

$('.dropdown-menu li a').on('click', function(e) {
    $('.dropdown-toggle').dropdown('toggle');
    e.stopPropagation();
});

Answer 2

My fix for more than one dropdowns in nav menu: Other solutions doesn't work for me

$('.dropdown-toggle').on('click', function (e) {
      $('.dropdown-toggle').each(function (i,elem) {
          if (elem != e.target) $(elem.parentElement).removeClass('open');
      });
})

Answer 3

iframes don't propagate click events up to their parents by default. You need to add code to do that manually. In addition to being able to edit the content of the iframe you are loading, cross-domain restrictions will require you to be loading the iframe content from the same domain as your page.

This would need to run from within the iframe page:

$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

where #frame is the id of your iframe. You could delegate the click to anything in the parent (e.g., 'body') and that would work as well. Depends on how tightly you want to couple the content in the iframe to the page.

So, that should take care of the page closing the menu.

Important Update

As for clicking on the menu items to close the menu, apparently there was a bug[?] in the lastest update (2.0.4 > 2.1.0): Dropdown menus don't get closed when selecting an option. A selector was changed from '.dropdown form' to '.dropdown', so now what was once a celebrated feature to make working with dropdowns in forms easier has evolved into a callback that blocks all clicks on dropdown menu items.

An interim solution is to include the following code until the bug is fixed (2.1.1):

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })

Answer 4

you can remove the "open" class from dropdown menus when another is clicked. this worked for me so far:

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Answer 5

I was seeing the same problem with 2.1.1.

The solution that was posted on GitHub which worked easily for me was:

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

Credit to blakeembrey at https://github.com/twitter/bootstrap/issues/5094

Answer 6

The bug is fixed now, You can use https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js , the 2.1.1-wip for dropdown