Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

问题

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 was an inherent bug within bootstrap which was solved in an update. I appear to be having the same issue so perhaps it\'s down to my markup?

I have a collapsable navbar with dropdowns and everything works perfectly on desktop browsers. However on a mobile, the dropdowns will open up when you click on the dropdown but clicking any dropdown links will just fold the dropdown back up again — the links cannot be reached. I have tried various bootstrap versions and cannot correct this so I can only imagine it is my markup. Here it is:

 <header class=\"navbar\">
    <div class=\"navbar-inner\">
        <div class=\"container\">
            <a href=\"#\"><h1>Branding</h1></a>
            <button type=\"button\" class=\"btn btn-navbar\" data-toggle=\"collapse\" data-target=\".nav-collapse\"> Menu </button>
            <div class=\"nav-collapse collapse\">
                <ul class=\"nav\">
                    <li><a href=\"#\">Menu Item 1</a></li>
                    <li class=\"dropdown\">                    
                        <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Menu Item 2 (Dropdown)<b class=\"caret\"></b></a>      
                        <ul class=\"dropdown-menu\">
                            <li><a href=\"#\">Dropdown Item 1</a></li>
                            <li><a href=\"#\">Dropdown Item 2</a></li>
                            <li><a href=\"#\">Dropdown Item 3</a></li>  
                            <li><a href=\"#\">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href=\"#\">Menu Item 3</a></li>
                    <li><a href=\"#\">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

Here\'s an example replicating the code (sorry, can\'t send the site): http://jsfiddle.net/yDjw8/1/

(Problem can only be seen/replicated on mobile — I\'m using iOS)

Any help would be much appreciated.

回答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

回答2:

Found this fix for version 2.3.2:

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>

Worked on two separate nav systems I built.

回答3:

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);
});

回答4:

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! :)

回答5:

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.

回答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!!!

回答7:

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");
        });
    });

回答8:

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?

回答9:

When you click on the dropdown, it adds the open class to your <li class="dropdown"> giving you: <li class="dropdown open">. When you click a link on the dropdown menu or the 'Menu item 2 (dropdown)', the open class is removed causing the dropmenu to fold up again.

The below fiddle shows how to stop the click event from propagating, but may cause you issues else where. Also, I only prevented the propagation on item #1 in the dropdown. You can use jQuery to have this happen on all items of the dropdown.

JS Fiddle: http://jsfiddle.net/yDjw8/2/

回答10:

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");
  }
});

回答11:

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');

回答12:

jquery-1.11.2, bootstrap-3.3.2:

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

回答13:

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>');

            });
        });