单击从下拉菜单触发的弹出窗口时，如何防止下拉菜单隐藏？答案

【问题标题】：How can I prevent dropdown menu hide when clicking on a popover triggered from dropdown?单击从下拉菜单触发的弹出窗口时，如何防止下拉菜单隐藏？
【发布时间】：2013-04-21 21:13:49
【问题描述】：

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

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

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

用户体验：

点击下拉菜单按钮===>下拉菜单显示
点击弹出框下拉项===>弹出框显示
点击弹出框===>下拉菜单，弹出框消失！ 哦不！我怎样才能防止这种情况发生？

我希望弹出框和下拉列表一直保持到 (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(); }
});

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

根据 Bootstrap DROPDOWN 类定义，下拉菜单使用 $parent.toggleClass('open') 注册为活动的。在这种情况下，它会将“open”类添加到作为“btnId”元素的父级的 btn-group div。

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

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

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

【讨论】：