Question

我有以下HTML代码：

<ul class="inline unstyled">
    <li class="select-value-li dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement="bottom">
            -- Select values to show --
            <b class="pull-right caret"></b>
        </a>
    </li>
</ul>

<div id="popover_select_values" style='display:none'>
    <ul class="scrollable-menu unstyled">
        <li>element 1</li>
        <li>element 2</li>
    </ul>
</div>

这是我的jQuery代码：

$(".select-value").popover({
    html: true,
    content: function() {
        return $("#popover_select_values").html();
    }
});

当我点击它之外的任何地方时，我想关闭此下拉列表。

$(document).on('click', function(e) {
    var isDropdown = $('.select-value-li.dropdown-open').length > 0;
    if (!isDropdown) {
        $('.select-value-li').slideUp();
    }
});

这将删除整个下拉列表。我甚至看不到select-values-to-show和旁边的插入符号。我只想关闭popover。

查看this JSfiddle。

Answer 1

您只需致电$(".select-value").popover('hide')即可关闭弹出式广告

Answer 2

最好使用data-trigger="focus"属性在焦点丢失时自动隐藏弹出窗口。因此，您不需要添加额外的事件处理程序。

但最好在这种情况下使用Dropdown。检查以下链接： http://getbootstrap.com/javascript/#dropdowns

Answer 3

查看以下代码段：https://jsfiddle.net/e46tu6o3/6/

$(document).on('click', function(e) {
    var isDropdown = $('.select-value-li.dropdown.open').length > 0;
    if (!isDropdown){
        $('.select-value').popover('hide');
    }
});

请注意，单击元素1或2也会关闭弹出窗口。

点击关闭Twitter Bootstrap下拉列表

3 个答案: