7

我在一个 Web 应用程序上使用 Bootstrap，该应用程序有一些包含 iframe 的页面。目前，我们无法移除 iframe。Bootstrap 下拉菜单可以正常打开，但是如果您单击属于 iframe 的页面的任何区域，则不会触发折叠事件。

这里的例子：http: //jsfiddle.net/mark47/bCzMf/3/

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

知道如何在单击页面上的任何位置时使其折叠吗？

更新：在@baptme 回答的帮助下，我能够让它工作。在我下面的回答中描述。

4

5 回答 5

8

我使用不同的方法解决了这个问题。我的解决方案是在窗口中添加一个模糊事件。也许不像其他一些建议那么优雅，但这是我发现的一个有效的建议。

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

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

于 2014-10-27T10:57:22.430 回答
1

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

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

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

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

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

于 2012-07-05T20:36:01.947 回答
0

基于@baptme 的回答和在另一个问题中找到的一些关于制作覆盖的提示，我能够让它工作。诀窍是得到它，这样当菜单关闭时你仍然可以与 iframe 的内容进行交互。

我所做的是在 iframe 区域上放置一个覆盖层——因为 iframe 的大小在站点的不同部分有所不同，所以我使用 jquery 来动态生成大小。默认设置visibility: hidden. 然后我不得不修改 bootstrap-dropdown.js 以更改下拉菜单打开时的可见性。

请参阅此处的工作小提琴。

我不必像最初建议data-toggle="dropdown"的那样删除 or类。.open

希望其他人会发现这很有用！

于 2012-07-11T19:35:42.130 回答
0

我今天看到了这篇文章，发现下面的代码对我有用。我只是附加到引导事件并动态创建了一个背景。我想设置不透明度，这样用户就知道点击 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");
    });
});
于 2016-12-02T14:43:35.817 回答
0

在更多情况下，当单击另一个区域时，下拉菜单不会折叠，例如，如果用户单击在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 问题混合了您的解决方案。

于 2017-01-24T13:54:48.417 回答