0

我有一个使用标准 Twitter Bootstrap javascript 组件的下拉菜单触发的弹出窗口。

当用户点击弹出框时，你能帮我防止下拉菜单关闭吗？

这是一个小提琴：http: //jsfiddle.net/EAdW5/

用户体验：

  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') 注册为活动的。在这种情况下，它将类“open”添加到 btn-group div，它是“btnId”元素的父级。

您可以阻止默认的 DROPDOWN 显示/隐藏切换，并使用 $('.btn-group').show(); 覆盖它 保持显示，无论引导程序默认行为如何。

然后在您的自定义 'mousedown' 事件以及 btn-group 节点的 'mouseout' 上使用 $('.btn-group').hide() 来恢复默认的引导行为。

或者，您也可以检查 jQuery event.stopPropagation() 或 event.stopImmediatePropagation() 以防止单击事件在 DOM 树上冒泡，从而防止任何父处理程序收到事件通知。http://api.jquery.com/event.stopPropagation/

于 2013-04-22T03:18:16.830 回答