Fix Twitter Bootstrap’s Dropdown Menus in Touch Screens

With Twitter Bootstrap’s 2.1 release, and running through the current version 2.2.1, dropdown menus have stopped working as they should in iOS and Android. Try to tap a submenu item, and the nav simply disappears. See the Github issue here. It is currently slated to be fixed in the upcoming 2.2.2 release, and I’m confident it will be addressed.

Until then, this quick little hack has worked for me. Add the following line of JS after Bootstrap’s bootstrap-dropdown.js (either in your own JS file or by adding it to Bootstrap’s JS):

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

Since then, dropdown menus work as they should in iOS and Android, and I’ve noticed no adverse effects on non-touch devices.

Credit: @blakeembrey’s Github comment here

UPDATE for Bootstrap Version 2.3.2

@robdodson has posted this fix for version 2.3.2 in Github:

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});