twitter bootstrap下拉菜单不应该关闭 [英] twitter bootstrap dropdown doesn't toggle closed when it should
问题描述
我正在使用Twitter Bootstrap。
顶部的固定导航一个下拉菜单，非常标准的东西。
除了下拉菜单通常不会关闭。只有当按下切换本身时，才会切换打开和关闭，而不是当菜单中的某个项目被按下或用户点击菜单外（两者都应该关闭下拉菜单）时。
我唯一做非标准的是我使用的是一个iframe和一个主题从bootswatch。
我没有像所以我有一种感觉可能是一个bug（升级到2.1.0，而jquery到1.7.2今天）。
这里的所有代码： / p>
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> test< / title>
<！ - Le HTML5垫片，用于IE6-8支持HTML元素 - >
<！ - [if lt IE 9]> < script src =http://html5shim.googlecode.com/svn/trunk/html5.js>< / script>百分比抑制率ENDIF] - GT！;
<！ - Le样式 - >
< link href =./ css / bootstrap.css =stylesheet>
< style>
iframe {
border：0px;
height：95％;
left：0px;
position：absolute;
顶部：50px;
width：100％;
}
< / style>
< / head>
< body>
< div class =navbar navbar-fixed-top>
< div class =navbar-inner>
< div class =container>
< a class =brandtarget =mainframehref =./ home.html>
品牌
< / a>
< ul class =nav>
< li class =dropdown>
< a href =＃class =dropdown-togglerole =buttondata-toggle =dropdown>
< i class =icon-pencil icon-white>< / i>
样本
< b class =caret>< / b>
< / a>
< ul class =dropdown-menurole =menu>
< li>
< a target =mainframehref =./ home.html＃> One< / a>
< / li>
< li>
< a target =mainframehref =./ home.html＃> Two< / a>
< / li>
< li>
< a target =mainframehref =./ home.html＃> Three< / a>
< / li>
< li>
< a target =_ blankhref =＃> Four
< i class =icon-share-alt>< / i>
< / a>
< / li>
< li>
< a target =_ blankhref =＃> Five
< / 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>事物< / a>< / li>
< li>
< a target =mainframehref =./ home.html>
< i class =icon-film icon-white>< / i> Nothing< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
< div class =container>
< iframe id =framename =mainframesrc =./ home.html>< / iframe>
<！ - / container - >
< / div>
<！ - Le javascript =================================== =========== - >
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jstype =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/
这需要从 iframe页面中运行 其中 所以，应该关闭菜单关闭的页面。 至于点击菜单项来关闭菜单，显然最近有一个错误[？] update（2.0.4> 2.1.0）：选择选项时，下拉菜单不会关闭。一个选择器从 临时解决方案是包括以下代码，直到错误为固定（2.1.1）： 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: live here:
http://www.joshlevent.com/dropdownbug/ 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: where So, that should take care of the page closing the menu. 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 An interim solution is to include the following code until the bug is fixed (2.1.1):
这篇关于twitter bootstrap下拉菜单不应该关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$（'html'） .on（'click'，function（）{
parent。$（'＃frame'）。trigger（'click'）;
}）;
#frame 是您的iframe中。您可以将点击委托给父项中的任何内容（例如，body），这也将工作。取决于您希望将iframe中的内容与页面相连的程度。
重要更新
'。下拉式表单'更改为'。下拉式'，所以现在曾经是一个庆祝的功能为了使表单中的下拉列表变得更容易，已经演变成一个阻止所有点击下拉菜单项的回调。
$（'body'）
.off（'click.dropdown touchstart。
.on（'click.dropdown touchstart.dropdown.data-api'
，'.dropdown form'
，function（e） {e.stopPropagation（）}）
<!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>
$('html').on('click', function () {
parent.$('#frame').trigger('click');
});
#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.Important Update
'.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.$('body')
.off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
.on('click.dropdown touchstart.dropdown.data-api'
, '.dropdown form'
, function (e) { e.stopPropagation() })
