单击iframe时,Bootstrap下拉列表不会折叠

Question

我在一个Web应用程序上使用Bootstrap,该应用程序包含一些包含iframe的页面.目前,我们无法移除iframe.Bootstrap下拉菜单可以正常打开,但是如果您点击页面中iframe一部分的任何区域,则崩溃事件不会触发.

示例:http: //jsfiddle.net/mark47/bCzMf/3/

尝试点击以关闭iframe外的任何位置,然后在iframe中关闭菜单.注意:iframe内容似乎没有显示在小提琴中,但您可以看到我的问题.

任何想法如何在点击页面上的任何位置时使其崩溃？

更新:在@baptme回答的帮助下,我能够让它运转起来.我在下面的答案中描述.

Answer 1

我使用不同的方法解决了这个问题.我的解决方案是向窗口添加模糊事件.也许不如其他一些建议那么优雅,但这是我发现的那个.

$(window).on('blur',function() { $('.dropdown-toggle').parent().removeClass('open'); } );

我想避免覆盖或透明蒙版,所以这似乎是一个很好的选择.我欢迎有关改进这种方法的建议.

Answer 2

下拉菜单的关闭是通过点击页面来触发的。

由于 iframe 不是页面，因此它不会关闭。

您必须data-toggle="dropdown"使用 javascript 删除调用下拉菜单$('.dropdown-toggle').dropdown()

然后在 iframe 顶部显示一个透明的 div 例如.transparent-mask

并使用 javascript (jQuery personnaly).open从.dropdown单击 .transparent-mask或文档中删除该类。