web-dev-qa-db-ja.com

Bootstrap-selectは「開く」クラスを切り替えません

ぜひチェックしてください-> [〜＃〜] fiddle [〜＃〜]

ソースを http://silviomoreto.github.io/bootstrap-select/ からダウンロードしましたが、修正できる「.dropdown-toggle」の「open」クラスが切り替えられない理由がわかりません。いくつかの厄介なスクリプトを追加することによってそれを行いますが、私はプラグインが正しく機能することを好みます。

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>

誰かが解決策を持っていますか？

jquerytwitter-bootstrapbootstrap-select
9
Payam Shakibafar

Twitterブートストラップに依存しています。次のように、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>

この更新されたフィドル を参照してください。CSSとJSが含まれており、問題なく動作しているようです。

13
Ted

私も同じ問題を抱えていました。参照を正しく行った後でも、クリックしてもドロップダウンが表示されませんでした。だから私は次のコードを含めて、それはうまくいきました。

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

依存関係の正しい順序は私にとって問題を解決しませんでした。私は DynoMyte's ソリューションを試しました。コードはドロップダウンを開きますが、閉じないでください。そこで、これを修正する行をさらにいくつか追加しました。

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

bootstrap.jsとbootstrapライブラリのdropdown.jsが含まれているため、この問題が発生しました。bootstrap.jsにはすでにdropdown.jsのすべての部分が含まれています。

この状況では、すべてのイベントハンドラーが2回アタッチされているため、クリックするとドロップダウンが2回切り替わります。これにより、開いた直後にドロップダウンが閉じます。

0
Urs Meili

最善の解決策は、bodyの下部にすべてのJSファイルを次の順序で含めることでした。

  1. jQuery
  2. Bootstrap
  3. ブートストラップ-選択
0
Xawery Wiśniowiecki