1

我有一个需要单击两次才能关闭 Bootstrap 下拉菜单的情况。当在下拉菜单之外发生点击时，我需要关闭两者，比如在另一个下拉按钮上。

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

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>
4

2 回答 2

4

您可以使用此解决方法：

// 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');
});

见 JSFIDDLE

于 2013-04-05T21:36:53.703 回答
3

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

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（否则 bootstrap-tooltips ' toggle ' 将被调用两次），事情似乎就像你想要的那样 - 的每当单击 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);

这是一个http://jsfiddle.net/PwNpB/3/ - 虽然这似乎有效，但对我来说仍然感觉有点脏，所以我希望有人真正了解这里发生的事情以及为什么会加入。

于 2013-04-03T23:46:15.220 回答