Home/ Questions/Q 9197349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:03:21+00:00

I have a Twitter Bootstrap (v2.2.1) collapsable navbar and dropdown buttons. They work all

  • 0

I have a Twitter Bootstrap (v2.2.1) collapsable navbar and dropdown buttons. They work all chirpy and happy in my desktop browser and also if I resize down my desktop browser window down to mobile size they work happily.

However on a mobile, the dropdowns will open up when you click on the dropdown but clicking on any of the links within the dropdown just causes the dropdown to close without following the link.

This seems similar to this other SO question, but the solution there was to move the data-toggle="dropdown" to the place I have them already.

Here’s the html on the page for the dropdown buttons:

<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
    /**
     * Twitter Bootstrap JQuery
     */
    //!function ($) {
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
    //}
</script>
</body>
</html>

I tested it on an android mobile in the Mobile Opera, Mobile Firefox and default android browser.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve tracked it down to a bug in Bootstrap 2.2.1 the changelog for 2.2.2 states:

    Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.

    If I swapped the bootstrap.js on my site from v2.2.1 to v2.2.2 then the buttons start working.

    So now, if I view this code on jsFiddle using the latest v2.2.2 Bootstrap then it works. 

    <html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
</script>   
</body>
</html>
    • 0