2

サイト フレームワークとして Twitter ブートストラップを使用しています。jQueryも使用しています。

私のメイン ナビゲーション バーには、検索ボックスを含むブートストラップ ドロップダウンがあります。検索ボックスには、完全に機能する jQuery オートコンプリート機能があります。

しかし、私の問題は、ユーザーがオートコンプリート リストの項目の 1 つをクリックすると、ブートストラップ ドロップダウンが閉じて、ユーザーがドロップダウンを再度開くまで [検索] ボタンをクリックできないことです (検索クエリはまだ存在します)。

明らかに、これは私のユーザーを悩ませています...

オートコンプリート リストから選択したときにドロップダウンが閉じないようにする簡単な方法はありますか? これは、2 つのフレームワーク間の競合によるものですか?

オートコンプリート

前もって感謝します。

ゴードン

アップデート：

以下のコードでこれを解決しました：

    <script type="text/javascript">
           $(document).ready(function () {
               $('body').find('.ui-autocomplete').click(function (e) {
                        e.stopPropagation();
               });
            });
    </script>

これにより、クリックされたときに ui-autocomplete ドロップダウン要素の伝播が停止し、ブートストラップ ドロップダウンを開いたままにして、ユーザーが検索ボタンをクリックできるようにします。

ポインターのisherwoodに感謝します

4

1 に答える 1

1

これは競合ではありませんが、Bootstrap のメニューの通常の動作です。そのためにこれらの関数を使用します。

$(function() {
    //prevent menu from closing when clicking into a form element
    $('.drop').find('form').click(function (e) {
        e.stopPropagation();
    });

    // other elements with the 'stay-open' class
    $('.drop').find('.stay-open').click(function (e) {
        e.stopPropagation();
    });
});
于 2013-01-29T14:49:56.543 に答える