Drop-down menu does not work on mobile devices

Question

The latest twitter bootstrap version (2.3.2) seems to have problems with dropdown menus on mobile devices.

When you click on the drop-down menu after opening the menu, the menu just closes and no link is clicked. You can see this on your sample page here: http://twitter.imtqy.com/bootstrap/examples/hero.html

I found a problem posted on their github page, but without a solution: https://github.com/twitter/bootstrap/issues/7927

Does anyone know a trick to fix this?

Answer 1

The interim fix is ​​to add

.dropdown-backdrop{ position: static; } 

to css file.

Answer 2

This worked for me:

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

via robdodson on github

Answer 3

For me, this added my styles:

 .dropdown-backdrop { z-index:0; } 

almost the same answer as Matthias, I hope this helps.

Answer 4

I fixed this problem.

My code is here

  <li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Sub menu</a></li> <li><a href="#">Sub menu2</a></li> </ul> </li> 

Add the following style to the CSS style.

 @media (max-width: 767px) { .dropdown.custom:hover .dropdown-menu { visibility: visible; display:block; border-radius:0; } } 

Visit: http://www.s4auto.co.za/

Answer 5

None of the usual answers seem to have fixed our problem on Android. We tried the accepted answer here and several javascript hacks: Links to the boot menu that do not work on mobile devices and also http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

Ultimately, we found that closure occurred and was conditionally called clearMenus() only if the parent links or the parent did not have a dropdown-submenu class

 $(document) .on('click.dropdown.data-api', function (e) { //fix start var $parent = $(e.target).parent() var $grandparent = $parent.parent() if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) { clearMenus() } //clearMenus //end fix }) .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) }(window.jQuery); 

Hope this helps!