30

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.

3
  • 1
    You might need to find another CDN to link to in your Fiddle. When I visit it the CSS and JS files are not being loaded properly. I tried creating my own Fiddle using the same CDN and the links to the CSS and JS files broke after I reloaded the Fiddle. Jun 18, 2013 at 21:12
  • 1
    Thanks for this @MichaelFreake — I have changed the hosting to dropbox - any better?
    – Stuart
    Jun 18, 2013 at 21:27
  • 1
    I can confirm that it's now working in Chrome on my Win7 machine. The fiddle is also displaying the exact same way on my iPhone 5 iOS 6.1.3 using both Chrome and Safari. I'm seeing the behaviour you have described as well. Click on a menu link - it highlights. Click on a submenu link - it collapses the menu. Jun 18, 2013 at 21:42

15 Answers 15

59

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

3
  • Thanks , this works perfectly after hours of surfing on the web T_T, thanks ! Sep 18, 2014 at 6:05
  • 1
    This solution not seems to work with bootstrap 3.3.6 :/
    – Guillaume
    May 15, 2016 at 16:00
  • 1
    This is not a 'solution'.
    – zilj
    Oct 3, 2016 at 13:44
13

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
  • 1
    Thanks for this answer. It made the links work but the dropdown doesn't collapse again on the version I tested. Either way, I would have put it as the accepted answer but @Jollyra got there first!
    – Stuart
    Aug 9, 2013 at 11:37
  • 1
    thanks for the solution. however there are two problems: 1. dropdowns dont close other open dropdowns when they open; and 2. links inside dropdowns fail to propagate their JS. posting a fix: stackoverflow.com/a/25041753/437019 Jul 30, 2014 at 16:07
  • Hi @YossiShasho , your solution work for me, Thanks a lot, but in every click the button, website's view will back to top of website's view, how to make view doesn't back to top/still at same position if I click dropdown button?
    – karisma
    Nov 7, 2020 at 9:30
9

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);
});
1
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! :)

1
  • 1
    best solution, worked for me perfectly for old versions of BS. Thanks!
    – Aslam
    Apr 17, 2014 at 10:57
4

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.

2
  • This question is quite old now, however at the time of writing, I had already tried this various times.
    – Stuart
    Mar 28, 2014 at 16:18
  • Worked for me, going from BS 3.7.1 to BS 4.1.3
    – PruitIgoe
    Nov 21, 2018 at 13:36
4

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

2

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");
  }
});
2
  • This code, as-is, fixed my issue even on Bootstrap 3.3.7
    – CopyJosh
    May 8, 2017 at 21:45
  • Hi bro @Yossi, this solution work for me, but in every click the button, website's view will back to top of website's view, how to make view doesn't back to top/still at same position if I click dropdown button?
    – karisma
    Nov 7, 2020 at 9:19
2

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

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?

1
  • 1
    Unfortunately I have tried re-adding Bootstrap about 5 times. Everything is all there out of the box. I'm really stuck on this one — weird behaviour for no reason. As I said before, it all works fine on desktop but obviously that's not where it's going to be in use :)
    – Stuart
    Jun 18, 2013 at 22:22
1

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/

1

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');
2
  • Yes, this works for me. I don't know why stated it twice it works.
    – Raza
    Oct 31, 2015 at 0:26
  • ok, this works... but it really falls into the "why does THIS work" kind of things.
    – Abela
    May 18, 2016 at 1:50
1

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>

0

jquery-1.11.2, bootstrap-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});
3
  • It would be helpful if you elaborated on the cause of the problem, and why your solution works. Feb 15, 2015 at 21:19
  • is work on me cause i use the dropdown.js from bootstrap. and same error happen.
    – Ferry
    Oct 6, 2016 at 8:02
  • My comment is really about providing information in your answer rather than just providing a code snippet. It's generally more helpful to explain rather than just saying "here, this works". Oct 6, 2016 at 8:49
0

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

            });
        });
0

I have to worked with Bootatrap v2.2.1. Dropdown was worked on desktop but immediately closing after opening on mobile.

And I think the problem is that old version doesn't expect to be work with touchable devices.

So my fix based on preventing some touch events:

$('a.dropdown-toggle').on('touchstart', function (e) {
  e.preventDefault();
});

In rare cases, you may need to add:

  $('a.dropdown-toggle').on('touchmove', function (e) {
      e.preventDefault();
  });

  $('a.dropdown-toggle').on('touchcancel', function (e) {
      e.preventDefault();
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.