Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

Question

I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked here with dropdown buttons, however the answer for that

Answer 1

In your minified bootstrap.min.js file, find the substring

"ontouchstart"

and replace it with

"disable-ontouchstart"

Check out this similiar SO question: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Answer 2

I recommending downloading the latest Bootstrap files and replacing the bootstrap.js and bootstrap.min.js on your server with the new versions.

This fixed the issue for me.

Answer 3

jquery-1.11.2, bootstrap-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});

Answer 4

Looks like it is all working to me, maybe try replacing your bootstrap files with a fresh copy incase you accidentally messed anything up in there. Or if that does not work, make sure you are importing everything. Are you sure you are importing all the CSS and the JS files?

Answer 5

I am using bootstrap-3.3.1 and I am experiencing the same problem in a Android phonegap app.

I found a funny workaround after several trials and errors:

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');

Answer 6

adding role="button" to <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> worked for me

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>