Menu
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.
836
It's caused by an outdated library called FastClick designed to make click events easier on mobile browsers. FastClick came out in 2013, back when mobile traffic was less common and mobile browsers were more rudimentary. At the time, FastClick was a great way to improve usability issues on mobile.
Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With