5 

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');

});
.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>
Bootstrap のボタン ドロップダウン コンポーネントを使用して、SELECT TAG のようなエクスペリエンスを作成しました。ユーザーはドロップダウンをクリックして任意のオプションを選択でき、同じ値がボタン内に即座に表示されます (マウスとキーボードからアクセスできます)。

ステップ 1:ドロップダウン内の単一行のオプション値をクリックします。

ステップ 2:ドロップダウン内の複数行オプション値をクリックします。

ステップ 3:ドロップダウン内の単一行のオプション値をもう一度クリックします。

問題: ステップ 3 の後、ドロップダウン リスト (例: ul) が消えません。

期待される結果: ステップ 3 の後、オプションを選択するたびに (マウス クリックとキーボード使用の両方で) ドロップダウン リスト (つまり、ul) が消えるはずです。

キャレットとデザイン関連の軽微なバグは無視してください

4

2 に答える 2

0

JS を変更して、DOM を削除または非表示にするだけです。

例えば：

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');
  
 $('.dropdown-menu').hide()


});
.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>
これを実行すると、もはやドロップダウンではありません。次に、作成したボタンを好きなようにスタイルします。

于 2015-10-23T15:43:24.907 に答える