哦，我一直在撕裂我的头发了这一点。 4小时上的下拉菜单。
我使用Twitter的引导。
顶部的固定资产净值有一个下拉菜单，相当标准的东西。
除了下拉没有得到关闭，因为它通常应。 它只会切换打开和关闭切换本身被按下时，在菜单中的项目是否被按下时，在菜单外用户点击（这两个应该关闭下拉列表）。
我做的不标准的唯一的事情是我使用的iframe和bootswatch一个主题。
我还没有这样的一个问题之前，所以我有可能是一个错误（升级引导至2.1.0和jQuery今天1.7.2）的感觉。
所有代码在这里：
<!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>
住在这里： http://www.joshlevent.com/dropdownbug/
I帧默认情况下不会传播click事件了他们的父母。 您需要添加代码，这样做手工。 除了能够编辑您所加载的iframe的内容，跨域限制会要求你要装载来自同一个域作为你的页面中的iframe内容。
这将需要从IFRAME页面中运行：
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
其中#frame是你的iframe的ID。 你可以委托父点击任何东西（例如， 'body' ），这将正常工作。 取决于你想要的情侣在iframe页面内容的紧密。
因此，应采取关闭菜单页面的照顾。
重要更新
至于点击菜单项来关闭菜单，显然有一个bug在最新的更新（2.0.4> 2.1.0）[？]： 选择一个选项时，下拉菜单中没有得到封闭 。 一个选择是从改变'.dropdown form'到'.dropdown' ，所以现在曾经是著名的功能，使与下拉菜单中的工作更轻松的形式已经演变成一个回调块上的下拉菜单项的所有点击。
一个临时的解决方案是包括以下内容的代码，直到错误被固定（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() })
没有什么工作对我来说，这个除外：
$('.dropdown-menu li a').on('click', function(e) {
$('.dropdown-toggle').dropdown('toggle');
e.stopPropagation();
});
我与2.1.1看到了同样的问题。
这容易为我工作被张贴在GitHub上的解决方案是：
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
感谢blakeembrey在https://github.com/twitter/bootstrap/issues/5094
这是完整的解决方案我基于Merv的伟大答案实现。 如果我张贴那些在未来的未来，请让我知道解决的办法更好的办法。
这个jQuery加入到该框架的网页的HTML的底部：
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
下拉切换到一个按钮，并重新设计以适应导航栏。 在html：
<li class="btn-group" id="samplebtn">
<a href="#" class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
<i class="icon-pencil icon-white"></i>
Sample
<b class="caret"></b>
</a>
在CSS：
#samplebtn {
position:absolute;
top: 0;
margin: 0px;
padding: 0px;
border: 0px;
}
#samplebtn .btn {
border: 0px;
}
的溶液充分代码（在讨论的全码的更新 - 这是外框架只）：
<!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%;
}
#samplebtn {
position:absolute;
top: 0;
margin: 0px;
padding: 0px;
border: 0px;
}
#samplebtn .btn {
border: 0px;
}
</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="btn-group" id="samplebtn">
<a href="#" class="btn btn-primary 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";
});
$('.dropdown-menu').on('click', function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
为完整的参考，这是在框架内的页的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</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="./bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<body onload="scrollTo(0,0); $('#loading').css('display','none');">
<div id="loading" style="width: 100%; height: 100%; background-color: white; background-image:url('loader.gif'); background-repeat:no-repeat; background-position: center center; position:fixed; display: none; z-index:100;"></div>
<script type="text/javascript">
document.getElementById("loading").style.display = 'block';
</script>
<div class="container">
<div class="span12">
<h2>Project Description</h2>
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
<!-- /container -->
</div>
<!-- Le javascript==================================================-->
<script src="./jquery.js"></script>
<script src="./bootstrap.min.js"></script>
<!-- <script src="./bootstrap-dropdown.js"></script>
-->
<script>
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
</script>
</body>
</html>
固定的测试网站，你可以在预览（但不要复制整个页面的代码，因为它有一些服务器端（CloudFlare的）东西在里面）。 http://www.joshlevent.com/dropdownbug/
现在的错误是固定的，你可以使用https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js ，2.1.1-WIP的下拉
你可以从下拉菜单中另一个被点击时删除“开放”类。 这个工作对我来说，到目前为止：
$(document).ready(function () {
$('a.dropdown-toggle').each(function(){
$(this).on("click", function () {
$('li.dropdown').each(function () {
$(this).removeClass('open');
});
});
});
});
我在导航菜单不止一个下拉菜单解决：其他的解决方案并没有为我工作
$('.dropdown-toggle').on('click', function (e) {
$('.dropdown-toggle').each(function (i,elem) {
if (elem != e.target) $(elem.parentElement).removeClass('open');
});
})
您也可以从父页面将此代码添加繁殖click事件（固定同样的问题对我来说）：
var myFrameContents = document.getElementById("frame").contentWindow.document;
myFrameContents.body.addEventListener("click", function() {
document.body.click();
});
