Question

我有一个案例，需要两次点击才能关闭Bootstrap下拉列表。我需要在下拉列表外发生点击时关闭，比如在另一个下拉按钮上。

标准的select元素可能会出现同样的情况，但这是我的特殊情况。我尝试点击各种Select2元素时调用dropdown('close')但没有成功。

<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

Answer 2

虽然我对twitter-bootstrap或select2都不是很熟悉（并且也不太熟悉JavaScript），但我注意到select2插入了一个名为#select2-drop-mask的元素，它捕获了mousedown - 和touchstart - 事件并处理select2-down的关闭：

mask.bind("mousedown touchstart", function (e) {
    var dropdown = $("#select2-drop"), self;
    if (dropdown.length > 0) {
        self=dropdown.data("select2");
        if (self.opts.selectOnBlur) {
            self.selectHighlighted({noFocus: true});
        }
        self.close();
    }
});

如果我们将这些相同的事件（简单的click无效）附加到document，并确保点击的元素实际上是#select2-drop-mask（否则引导工具提示'{ {3}}'将被调用两次），事情似乎表现得像你想要的那样 - 只要点击select2-element之外的东西，就会关闭twitter-bootstrap下拉列表：

function closeBootstrapDropdown() {
    if ($(event.target).is('#select2-drop-mask')) {
        // toggle the twitter-bootstrap dropdown
        $('.dropdown.open .dropdown-toggle').dropdown('toggle');
    }
}

$(document).on('mousedown touchstart', closeBootstrapDropdown);

这是一个toggle - 虽然这似乎有用，但对我来说仍然感觉有些肮脏，所以我希望有一些人真正了解这里发生的事情以及为什么会这样。

关闭模糊时包含活动Select2元素的Bootstrap下拉列表

2 个答案: