jquery - Bootstrap 下拉菜单在单击选择框时关闭

Question

我试图在 bootstrap 下拉列表中添加一个使用 select2 插件构建的自定义选择框，但是当我单击选择框时，bootstrap 下拉列表正在关闭。有谁能帮帮我吗？

HTML

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <select class="select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </ul>
</div>

Javascript

$(".select").select2({
  minimumResultsForSearch: -1,
});

我在下面的 jsfiddle 中模拟了我的问题:

https://jsfiddle.net/arunvenugopal11/qmh7jt5j/4/

Answer 1

要实现你想要的，你可以使用下面的代码。

$(document).on("click", function(e) {
  if ($(e.target).closest("div.dropdown").length) {
    $(e.target).closest("div.dropdown").addClass("open")
  }
})


$(".select").on("change", function() {
  $("div.dropdown").removeClass("open")
})

更新示例 here