Jos*_*osh 5 iframe jquery twitter-bootstrap drop-down-menu bootswatch
哦,伙计,我一直在撕扯我的头发.下拉列表4小时.
我正在使用Twitter Bootstrap.
顶部的固定导航有一个下拉,非常标准的东西.
除了下拉不会像通常那样关闭.只有在按下切换按钮时才会切换打开和关闭,而不是在按下菜单中的项目或用户在菜单外单击时(这两个都应该关闭下拉列表).
我唯一不做的就是使用iframe和bootswatch的主题.
我以前没有这样的问题,所以我觉得它可能是一个bug(升级后的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>
iframe默认情况下不会将点击事件传播到父母.您需要添加代码才能手动执行此操作.除了能够编辑您正在加载的iframe的内容之外,跨域限制还要求您从与您的网页相同的域中加载iframe内容.
这需要在 iframe页面中运行:
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
#frameiframe的ID 在哪里.您可以将点击委托给父级中的任何内容(例如,'body'),这也可以.取决于您希望将iframe中的内容与页面耦合的紧密程度.
所以,这应该关闭关闭菜单的页面.
至于单击菜单项以关闭菜单,显然最新更新(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() })