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

This seems to work without any issues. The class "open" already exists with bootstrap and should be working, but for some reason it isn't. This code forces it to run accordingly. :)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

Answer 2

I reckon if you do the following, the links will work properly

$(document).ready(function(){
            $('.youClass').click(function(){
                var menuItem = '<a class=" " href=" ">Log Out</a>';

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });

Answer 3

This fix is for Bootstrap 2.3.2, and its based on the answer by @asbanks (https://stackoverflow.com/a/18107103/437019).

On top of asbanks's answer, this script also propagates JS calls from links inside the dropdowns, and an opened dropdown closes other open ones.

$(function() {
  return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
    $(this).next("ul.dropdown-menu").css("display", "block");
    return e.stopPropagation();
  });
});

$(document).on('click click.dropdown.data-api', function(e) {
  if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
  }
});

Answer 4

I am using BootStrap 3.1.1. I have tried many answers, dropdown menu works fine on Android devices but still doesn't works on iOS device. Finally I find root cause of the problem.

safari on iPhone only support click event for <a> and <input> element. See this passage Click event delegation on the iPhone.

So we need to add custom click delegation. Following code will solve the problem.

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});

Answer 5

I solved this same problem doing this:

1.Open your js/bootstrap-dropdown.js or the minified version of it.

2.Find for the lines or places for: touchstart.dropdown.data-api

3.There should be only 4 occurs of it. Something like this:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

You should insert this new line between the 2nd and 3rd occurences:

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4.Your news piece of code must be something like this:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Be careful on minified versions of Bootstrap.js... so you must concatenate the new line at the exact position on it.

Good luck! :)

Answer 6

I found solution of this from bootstrap git-hub forum. You need to include just one line of code in script on document ready as,

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

Its work for me!!!