Question

I have a simple (almost directly from the documentation) drop down menu using Bootstrap’s drop down menu function.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="http://www.google.com">Tickets</a></li>
    <li><a href="http://www.google.com">Gift Shop</a></li>
    <li><a href="http://www.google.com">Event Info</a></li>
  </ul>
</div>

I am loading scripts:

<script src="/assets/js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.handlers.js"></script>
<script type="text/javascript" src="/assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="/assets/js/home-animations.js"></script>

If I scale the browser (Chrome) the menu opens and works. On a device (iPhone 4S primarily for testing) the menu opens but closes immediately on touch. I tried dropping the menu down on different locations on the page, so it is not a zindex issue. I just got the latest version of Bootstrap with all of the plugins included, including bootstrap.dropdown.

Any idea why is would just close immediately on touch?

Answer 1

It’s a bug and it will be fixed in 2.2.2. Found a temporary solution here:

http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/