twitter bootstrap dropdown doesn't toggle closed when it should
Oh man, I've been tearing my hair out over this. 4 hours on a dropdown.
I'm using Twitter Bootstrap.
The fixed nav at the top has a dropdown, pretty standard stuff.
Except that the dropdown doesn't get closed as it normally should. It will only toggle open and closed when the toggle itself is pressed, not when an item in the menu is pressed or the user clicks outside the menu (both of these should close the dropdown).
The only thing I'm doing non-standard is my use of an iframe and a theme from bootswatch.
I haven't had an issue like this before so I have a feeling it may be a bug (upgraded bootstrap to 2.1.0, and jquery to 1.7.2 today).
all the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<style>
iframe {
border: 0px;
height: 95%;
left: 0px;
position: absolute;
top: 50px;
width: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" target="mainframe" href="./home.html">
Brand
</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">
<i class="icon-pencil icon-white"></i>
Sample
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a target="mainframe" href="./home.html#">One</a>
</li>
<li>
<a target="mainframe" href="./home.html#">Two</a>
</li>
<li>
<a target="mainframe" href="./home.html#">Three</a>
</li>
<li>
<a target="_blank" href="#">Four
<i class="icon-share-alt"></i>
</a>
</li>
<li>
<a target="_blank" href="#">Five
<i class="icon-share-alt"></i>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-certificate icon-white"></i>Stuff</a></li>
<li>
<a href="#">
<i class="icon-globe icon-white"></i>Things</a></li>
<li>
<a target="mainframe" href="./home.html">
<i class="icon-film icon-white"></i>Nothing</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<iframe id="frame" name="mainframe" src="./home.html"></iframe>
<!-- /container -->
</div>
<!-- Le javascript==================================================-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
var frameheight = window.innerHeight - 50;
document.getElementById("frame").style.height = frameheight + "px";
});
$(window).resize(function () {
var frameheight = window.innerHeight - 50;
document.getElementById("frame").style.height = frameheight + "px";
});
</script>
</body>
</html>
live here: http://www.joshlevent.com/dropdownbug/
Answer
iframes don't propagate click events up to their parents by default. You need to add code to do that manually. In addition to being able to edit the content of the iframe you are loading, cross-domain restrictions will require you to be loading the iframe content from the same domain as your page.
This would need to run from within the iframe page:
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
where #frame is the id of your iframe. You could delegate the click to anything in the parent (e.g., 'body') and that would work as well. Depends on how tightly you want to couple the content in the iframe to the page.
So, that should take care of the page closing the menu.
Important Update
As for clicking on the menu items to close the menu, apparently there was a bug[?] in the lastest update (2.0.4 > 2.1.0): Dropdown menus don't get closed when selecting an option. A selector was changed from '.dropdown form' to '.dropdown', so now what was once a celebrated feature to make working with dropdowns in forms easier has evolved into a callback that blocks all clicks on dropdown menu items.
An interim solution is to include the following code until the bug is fixed (2.1.1):
$('body')
.off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
.on('click.dropdown touchstart.dropdown.data-api'
, '.dropdown form'
, function (e) { e.stopPropagation() })