單擊關閉Twitter Bootstrap下拉彈出窗口

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的select-values-to-show和旁邊的插入符號。 我只想關閉彈出窗口。

看看這個JSfiddle 。

Answer 1

您只需調用$(".select-value").popover('hide')即可關閉彈出窗口

Answer 2

最好使用data-trigger="focus"屬性來自動隱藏丟失的焦點上的彈出框。 因此，您無需添加額外的事件處理程序。

但在這種情況下，最好使用下拉菜單。 檢查以下鏈接： 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也會關閉彈出窗口。