0

標準の Twitter Bootstrap JavaScript コンポーネントを使用して、ドロップダウン メニューによってトリガーされるポップオーバーがあります。

ユーザーがポップオーバーをクリックしている間、ドロップダウンが閉じないようにするのを手伝ってもらえますか?

ここにフィドルがあります：http://jsfiddle.net/EAdW5/

UX:

  1. ドロップダウンメニューボタンをクリックするとドロップ===>ダウンメニューが表示されます

  2. ポップオーバーのドロップダウン項目をクリックします===>ポップオーバーが表示されます

  3. ポップオーバー ドロップダウン メニューをクリック===>すると、ポップオーバーが消えます。 いや！どうすればこれを防ぐことができますか?

（a）ドロップダウンとポップオーバーの外側をクリックするか、（b）意図的に非表示にする（たとえば、ポップオーバーフォームの送信をクリックした後）まで、ポップオーバーとドロップダウンを表示したままにしたいと思います。

html:

<div class="btn-group">
    <button id="btnId" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Regular Link 1</a></li>
        <li><a href="#">Regular Link 2</a></li>
        <li><a href="#" id="popoverId" class="popoverThis">Popover Link</a></li>
    </ul>
</div>

<div class="hide" id="popover-custom-content">
    <div class="form-inline">
        <div class="control-group">
            <textarea name="issue"></textarea>
        </div>
        <div class="control-group">
            <button id="btnPopoverSubmitId" class="btn">Add</button>
            <span class="close close-inline">Cancel</span>
        </div>
    </div>
</div>

JS:

$('#popoverId').popover({
    html:true,
    placement: 'right',
    title: "Popover Title",
    template: '<div id="popover-custom-content" class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    content: function() { return $('#popover-custom-content').html(); }
});
4

1 に答える 1

1

Bootstrap DROPDOWN クラス定義によると、ドロップダウンは $parent.toggleClass('open') を使用してアクティブとして登録されます。この場合、「btnId」要素の親である btn-group div に「open」クラスを追加します。

デフォルトの DROPDOWN 表示/非表示トグルを防止し、 $('.btn-group').show(); を使用してオーバーライドできます。Bootstrap のデフォルトの動作に関係なく、表示されたままにします。

次に $('.btn-group').hide() をカスタムの 'mousedown' イベントと btn-group ノードの 'mouseout' イベントで使用して、デフォルトの Bootstrap の動作を復元します。

または、jQuery の event.stopPropagation() または event.stopImmediatePropagation() をチェックして、クリック イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにすることもできます。http://api.jquery.com/event.stopPropagation/

于 2013-04-22T03:18:16.830 に答える