首页 文章

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

提问于
浏览 次
1

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

标准的select元素可能会出现同样的情况，但这是我的特殊情况 . 我已经尝试在单击各种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>
jquery twitter-bootstrap jquery-select2

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

    SEE JSFIDDLE

    回复于
  • 3

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

    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'将被调用两次），事情似乎表现得像你想要的那样to - 只要点击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/ - 虽然这似乎有用，但对我来说仍然感觉有些肮脏，所以我希望有些人真正了解这里发生的事情以及为什么会这样 .

    回复于

相关问题