天哪，我一直在为这件事抓狂。 4个小时的下拉菜单。
我正在使用 Twitter Bootstrap。
顶部的固定导航有一个下拉菜单，非常标准的东西。
只是下拉菜单没有像平常那样关闭。仅当按下切换按钮本身时，它才会打开和关闭，而不是按下菜单中的项目或用户单击菜单外部时（这两者都应关闭下拉菜单）。
我唯一做的非标准的事情是使用 iframe 和 bootswatch 的主题。
我以前没有遇到过这样的问题，所以我感觉这可能是一个错误（今天将 bootstrap 升级到 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/ http://www.joshlevent.com/dropdownbug/
默认情况下，iframe 不会将点击事件传播到其父级。您需要添加代码来手动执行此操作。除了能够编辑正在加载的 iframe 内容之外，跨域限制还要求您从与页面相同的域加载 iframe 内容。
这需要从withiniframe 页面：
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
where #frame是你的 iframe 的 id。您可以将点击委托给父级中的任何内容（例如，'body'）那也可以。取决于您希望将 iframe 中的内容与页面耦合的紧密程度。
因此，这应该处理关闭菜单的页面。
重要更新
至于点击菜单项关闭菜单，显然在最新的更新（2.0.4 > 2.1.0）中存在一个bug[？]：选择选项时下拉菜单不会关闭 https://github.com/twitter/bootstrap/issues/4497。选择器已更改为'.dropdown form' to '.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() })
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
