jquery - 关闭包含模糊时事件 Select2 元素的 Bootstrap 下拉列表

Question

我遇到了需要单击两次才能关闭 Bootstrap 下拉列表的情况。当在下拉列表外部发生点击(例如另一个下拉按钮)时，我需要关闭两者。

标准选择元素可能会发生同样的情况，但这是我的特定场景。我尝试在单击各种 Select2 元素时调用 dropdown('close') 但没有成功。

http://jsfiddle.net/isherwood/PwNpB/15

<div class="dropdown">
    <span data-toggle="dropdown" class="btn  dropdown-toggle">
        Button <span class="caret pull-right"></span>
    </span>

    <div class="dropdown-menu">
        <select id="e1">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
        </select>
    </div>
</div>

Answer 1

您可以使用此解决方法:

// initialize Select2 
$("#e1").select2().on('open', function () {
    $('#select2-drop-mask')
       .height($(window).height())
       .width($(window).width())
       .css('opacity', .1);
});


$(document).on('mousedown', '#select2-drop-mask', function () {
    $('.dropdown.open').removeClass('open');
});

SEE JSFIDDLE