twitter-bootstrap Bootstrap-select 不会切换“打开”类

Bootstrap-select does not toggle "open" class

提问by Payam Shakibafar

Check it out please -> FIDDLE

请检查一下 -> FIDDLE

I downloaded the source from http://silviomoreto.github.io/bootstrap-select/, I really have no idea why it's not toggling "open" class of ".dropdown-toggle" I can fix it by adding some messy scripts, but I prefer the plugin to work right.

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

the HTML:

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>

does anybody have a solution ?

有人有解决方案吗？

回答by Ted

It has a dependency on twitter bootstrap. Include their CSS and JavaScriptfiles like so:

它依赖于 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>

See this updated fiddlewith the CSS and JS included, and it seems to work just fine.

看到这个包含 CSS 和 JS 的更新小提琴，它似乎工作得很好。

回答by DinoMyte

I had the same issue. Even after having the references right, the dropdown didn't show on click. So I included the following code and it worked.

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

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

回答by bilbohhh

The correct order of dependencies did not solve the problem for me. I tried DynoMyte'ssolution. The code opens a dropdown, but do not close it. So I added a few more lines that fix this.

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

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

回答by Urs Meili

I had this issue because bootstrap.jswas included as well as dropdown.jsfrom the bootstrap library. bootstrap.js already included all parts of dropdown.js.

我遇到了这个问题，因为bootstrap.js它既包含dropdown.js在 bootstrap 库中，也包含在 bootstrap 库中。bootstrap.js 已经包含了 dropdown.js 的所有部分。

It seems like in this situation, all event handlers were attached twice, resulting in toggling the dropdown twice on click - which results in closing it immediately after opening.

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

回答by Sebastian Xawery Wi?niowiecki

For the best solution was to include all JS files at the bottom of the bodywith following order:

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

1. jQuery
2. Bootstrap
3. Bootstrap-select

1. jQuery
2. 引导程序
3. 引导选择