9

Bootstrap ボタンのドロップダウンを使用してフォームを表示します。を呼び出して、(ユーザーがフォームを操作している間) onclick が消えるドロップダウンを無効にしましたstopPropagation。フォームの要素の 1 つはドロップダウン リストです。ネイティブの html select 要素を使用すると、すべて問題ありません (見栄えが悪いことを除いて)。これを bootstrap-select (div による選択を模倣する) に置き換えると、値を選択できません (ボタンのドロップダウンに十分な場所がないため)。container: 'body'bootstrap-selectに指定する回避策を適用しようとしました。ドロップダウンリストの値を確認するのに役立ちますが、要素を選択するとボタンのドロップダウンが閉じられます (boostrap-select が body に属し、クリック伝播が適用されるボタンのドロップダウンよりも高いために発生すると思います)。

            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select id="mySelect" class="selectPicker">
                              <option>1</option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
  $('.dropdown-menu').click(function(e) {
                e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
            });

  $('.selectpicker').selectpicker({container: 'body'});
</script>
4

2 に答える 2

1

私はあなたの機能を少し変更し、Chrome と FF でテストしました。

$("ul.dropdown-menu").on("click", "form", function(e) {
    e.stopPropagation(); });

実施例

于 2014-08-22T09:14:11.837 に答える