点击iframe时，Bootstrap下拉菜单不会崩溃 [英] Bootstrap dropdown doesn't collapse when clicking over iframe

问题描述

我在一个包含iframe的网页的网络应用中使用Bootstrap。目前，我们无法删除iframe。 Bootstrap下拉菜单可以正常打开，但是如果您点击该页面的iframe的任何区域，则崩溃事件不会触发。

I'm using Bootstrap on a web app that has some pages that contain iframes. At this time, we're not able to remove the iframes. Bootstrap dropdown menus work fine to open, but if you click on any area of the page that's part of the iframe the collapse event doesn't fire.

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

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

Try clicking to close the menu anywhere outside the iframe and then within the iframe. Note: iframe content doesn't seem to show up in the fiddle, but you can see my problem.

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

Any idea how to make it collapse when clicking anywhere on the page?

更新：在@baptme的帮助下，我可以让它工作。

UPDATE: With the help of @baptme answer, I was able to get it working. Described in my answer below.

推荐答案

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

The closure of the dropdown is triggered by a click on the page.

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

Since the iframe is not the page, it doesn't close.

您必须删除 data- toggle =dropdown使用javascript调用下拉列表 $（'。dropdown-toggle'）。dropdown（）

You must remove data-toggle="dropdown" call the dropdown with javascript $('.dropdown-toggle').dropdown()

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

then display a transparent div on the top of the iframe for example .transparent-mask

和javascript（jQuery personnaly）从 .dropdown 中删除​​ .open c> $ c> .transparent-mask 或文档。

and with javascript (jQuery personnaly) remove the .open class from .dropdown on click on .transparent-mask or the document.

这篇关于点击iframe时，Bootstrap下拉菜单不会崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！