7

iframe を含むページがある Web アプリで Bootstrap を使用しています。現時点では、iframe を削除することはできません。Bootstrap ドロップダウン メニューは正常に開くことができますが、iframe の一部であるページの領域をクリックすると、collapse イベントは発生しません。

例: 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はページではないため、閉じません。

data-toggle="dropdown"javascriptでドロップダウンの呼び出しを削除する必要があります$('.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"最初に提案されたように、または.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 に答える