Bootstrap-select 不切换 "open" class

Question

请查看 -> FIDDLE

我从 http://silviomoreto.github.io/bootstrap-select/ 下载了源代码，我真的不知道为什么它不切换 "open" class of ".dropdown-toggle" 我可以通过添加一些乱七八糟的脚本来修复它，但我更喜欢插件正常工作。

HTML:

<div class="number customdp">
<select class="simple-dropdown" name="number">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

有人有解决办法吗？

Answer 1

它依赖于 Twitter bootstrap。像这样包含他们的 CSS 和 JavaScript 文件：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

参见 this updated fiddle，其中包含 CSS 和 JS，它似乎工作得很好。

Answer 2

最好的解决方案是按照以下顺序将所有 JS 文件包含在 body 的底部：

jQuery
Bootstrap
Bootstrap-select

Answer 3

我遇到了同样的问题。即使在正确引用之后，下拉菜单也没有在点击时显示。所以我包含了以下代码并且它起作用了。

 $(document).ready(function () { 
    $(".selectpicker").selectpicker();
    $(".bootstrap-select").click(function () {
         $(this).addClass("open");
    });
  });

Answer 4

正确的依赖顺序并没有解决我的问题。我尝试了解决方案。该代码打开一个下拉列表，但不关闭它。所以我添加了几行来解决这个问题。

   $(".selectpicker").selectpicker();
      $(".bootstrap-select").click(function () {
        $(this).addClass("open");
      });
      $(document).click(function(){
        $(".bootstrap-select").removeClass("open");
      });
      $(".bootstrap-select").click(function(e){
        e.stopPropagation();
    });

Answer 5

我遇到这个问题是因为 bootstrap.js 和 dropdown.js 来自 bootstrap 库。 bootstrap.js 已经包括 dropdown.js 的所有部分。

似乎在这种情况下，所有事件处理程序都附加了两次，导致在单击时切换下拉列表两次 - 这导致在打开后立即关闭它。

Bootstrap-select 不切换 "open" class

Bootstrap-select does not toggle "open" class

jquery

twitter-bootstrap

bootstrap-select