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);
});
Worked perfectly!
Thanks.
@splondike has shared another, potentially better, fix with some clarifying explanation here
@mdo just announced a temp fix has been applied to enable dropdowns to work as they should in the upcoming 2.2.2 release. Announced in Github here and in Twitter here.
Thanks a lot, works fine.
Dropdown:
– First option
– Second option
– Another dropdown within this one
– First option of the second dropdown
– Second option of the second dropdown
– Third option of the first dropdown
Is this possible? Thanks in advance! 🙂
Its not working for me. Any Idea? I am uding bootstrap-transition.js v2.3.2.
Sub menu items are not clickable 😦
Hi hitesh,
There’s been ongoing discussion about this problem in the Github project.
There are some recommended solutions that have been posted recently in the comments here, apparently with some success!
https://github.com/twbs/bootstrap/issues/4550
hitesh — I’ve just posted the snippet that @robdodson has recommended for version 2.3.2 and that others seem to confirm does the trick. I have not yet had a chance to test myself. I’d be interested to hear your results!
Thank you very much. This worked !!
thanks, this bug made me mad…
Thank you! I have been fighting this for weeks and spent all day looking for solutions. The last one here finally worked w 2.3.2
Thanks heaps David, I was going to move to Bootstrap 3 but with hundreds of views and the changes between 2.3.2 to 3 this would take me weeks. Plus Bootstrap 3 does not support sub menus anymore.
So yeah UPDATE for Bootstrap Version 2.3.2 has solved my problems.
Cheers
thanks…was really helpful
Thanks a lot for your update on bootstrap 2.3.2 !!!
After hours of desperate research, you make my day 🙂
Kévin — Gladly!
Thanks a lot!…this bug was turning me crazy!!!
Thank you soo much… Now its working on android mobile.
Thanks you very much!
Thank you. This worked flawlessly in my Yii based project!
2.3.2 fix Works for me. Thanks a lot.
You really saved my time.