Question

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

你可以帮我阻止用户点击popover时关闭下拉列表吗？

UX：

点击下拉菜单按钮===>下拉菜单显示
点击popover下拉列表===> Popover显示
点击Popover ===>下拉菜单，popover消失！ 哦不！我该如何防止这种情况？

我希望popover和dropdown保持不变，直到（a）点击外部下拉菜单和popover，或者（b）故意隐藏（例如，点击popover表单提交后）。

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(); }
});

Answer 1

根据Bootstrap DROPDOWN类定义，使用$ parent.toggleClass（'open'）将下拉列表注册为活动。在这种情况下，它将类'open'添加到btn-group div，它是'btnId'元素的父级。

您可以阻止默认的DROPDOWN显示/隐藏切换，并使用$（'。btn-group'）覆盖它.show（）;无论Bootstrap默认行为如何，都要显示它。

然后在你的自定义'mousedown'事件上以及btn-group节点的'mouseout'上使用$（'。btn-group'）。hide（）来恢复默认的Bootstrap行为。

或者，您还可以检查jQuery event.stopPropagation（）或event.stopImmediatePropagation（）以防止click事件冒泡DOM树，从而阻止任何父处理程序收到事件通知。 http://api.jquery.com/event.stopPropagation/

如何在点击从下拉菜单触发的弹出窗口时阻止下拉菜单隐藏？

1 个答案: