Question

我在一个网页应用上使用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不是页面，因此不会关闭。

您必须使用javascript data-toggle="dropdown"

删除$('.dropdown-toggle').dropdown()来拨打下拉列表

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

并使用javascript（jQuery personnaly）点击.open或文档，从.dropdown删除.transparent-mask课程。

Answer 3

基于@baptme答案和另一个问题中找到的一些tips on making an overlay，我能够让它发挥作用。诀窍是获取它，这样当菜单关闭时你仍然可以与iframe的内容进行交互。

我所做的是在iframe区域上放置一个叠加层 - 由于iframe的大小因网站的不同部分而异，我使用jquery动态生成大小。默认情况下设置visibility: hidden。然后我必须修改bootstrap-dropdown.js以在下拉列表打开时更改可见性。

请参阅working fiddle here。

我没有必要删除最初建议的data-toggle="dropdown"或.open类。

希望其他人会觉得这很有用！

Answer 4

我今天看过这篇文章，发现以下代码对我有用。我只是附加了自举事件，并在飞行中创建了一个背景。我想设置不透明度，以便用户知道点击iframe部分不会做任何事情。此外，我有不包含iframe的页面，我希望它们以相同的方式运行。我不得不禁用非iframe页面的滚动。希望这段代码有所帮助。

var navBackdrop =
    $('<div id="nav-backdrop" class="modal-backdrop" tabindex="-1" style="z-index: 0; top: 50px; overflow-y: auto; display: none; opacity: .4"></div>');

$(document).ready(function () {
    $("body").append(navBackdrop);

    $(".navbar").on("shown.bs.dropdown", ".dropdown", function () {
        navBackdrop.show();
        $("body").css("overflow", "hidden");
    }).on("hide.bs.dropdown", ".dropdown", function () {
        navBackdrop.hide();
        $("body").css("overflow", "auto");
    });
});

Answer 5

更多情况下，点击其他区域时，下拉菜单不会崩溃，例如如果用户点击了在点击事件中使用event.stopPropagation();的其他元素。

我的解决方案：

$(document).on('show.bs.dropdown', function ( event ) {

    //Get the element that responsible on opening the drop-down (parent of the clicked element)
    var $target = $(event.target);

    //Close the menu when the user click on any area
    $(document).one( 'mouseup.collapseBsDropdown', function() {
         $target.removeClass('open');
         $(window).off('blur.collapseBsDropdown');
    });
    $(window).one( 'blur.collapseBsDropdown', function() {
        $target.removeClass('open');
        $(document).off('mouseup.collapseBsDropdown');
    });
});

感谢@Witchfinder，我为iframe问题混合了您的解决方案。

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

5 个答案: