2

短編小説: stopPropagation() は、ドロップダウン メニューが閉じるのを防ぎます - これは良いことです。ただし、次回はドロップボックスが開かなくなります。これは悪いことです。

長い話: 私は Twitter-Bootstrap を使用しており、次のようにドロップダウン メニュー内に検索ボックスを配置しました。

<div id="search_word_menu" style="position:absolute;right:157px;top:60px;"> 
        <ul class="nav nav-pills">
            <li class="dropdown" id="menu200">
                <a class="dropdown-toggle btn-inverse" data-toggle="dropdown" style="width:117px;position:relative;left:2px" href="#menu200">
                <i class="icon-th-list icon-white"></i>
                    Testing
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Retweets</a></li>
                    <li><a href="#">Favourites</a></li>
                    <li class="divider"></li>
                    <li><a href="#">A list</a></li>
                    <li class="divider"></li>
                    <li><a href="#">A saved search</a></li>
                    <li><a href="#">A saved #hashtag</a></li>
                    <li class="divider"></li>
                    <li>
<!--   HERE -->     <input id="drop_search" type="text" class="search_box_in_menu" value="Search...">

                    </li>
                </ul>
            </li>
        </ul>

検索ボックス内をクリックすると、デフォルトの動作は明らかにドロップダウンを閉じることですが、それでは検索語を入力するのがかなり難しくなります。だから私は e.stopPropagation() を試してみましたが、これは実際にドロップダウンが閉じるのを防ぎます。次に、検索ボックスで Enter キーを押すと、ドロップダウンを .toggle() で閉じます。これも正常に動作するようです。

e.stopPropagation() がドロップダウンをすべて無効にしたため、もう一度やり直したいときに問題が発生します。ドロップダウンメニューを押しても、もう開かない! これは間違いなく stopPropagation() が原因です - しかし、どうすればこれを解決して、前述の機能を取得できますが、残りを完全に壊すことはありませんか?

以下のjQuery：

$(document).ready(function() {
    console.log("document.ready - ");

                //clearing search box on click
    $(".search_box_in_menu").click(function(e) {
        e.stopPropagation(); // works for the specific task
        console.log(".search_box_in_menu - click.");
        if($(this).val() == 'Search...') {
            $(this).val('');
            console.log(".search_box_in_menu - value removed.");

        };
        //return false; //this is e.preventDefault() and e.stopPropagation()


    });

                    // when pressing enter key in search box
    $('.search_box_in_menu').keypress(function(e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '13') {
            console.log(".search_box_in_menu - enter-key pressed.");
            console.log($(this).val());
            $(this).closest('.dropdown-menu').toggle(); //works

        }
    });


    $('.dropdown').click(function() {
        console.log(".dropdown - click.");
        $(this).closest('.dropdown-toggle').toggle(); //does nothing
    });

助けていただければ幸いです。これはブートストラップのみの問題であるか、少なくともそれらの実装が原因である可能性があると疑い始めていますが、それは私のatmを超えています.

4

1 に答える 1

0

解決策を見つけました: を使用しstopPropagation()、手動トリガーでボックスを閉じます。その後、何らかの理由で (stopPropagation()リセットですか?)、動作します。

//dealing with the dropdown box
$(document).ready(function() {
    console.log("document.ready - ");

    //clearing search box on click and prevent the dropdown from closing
    $(".search_box_in_menu").click(function(e) {
        e.stopPropagation();
        console.log(".search_box_in_menu - click.");
        if($(this).val() == 'Search...') {
            $(this).val('');
            console.log(".search_box_in_menu - value removed.");
        };
        //return false;         

    });

    // when pressing enter key in search box
    $('.search_box_in_menu').keypress(function(e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '13') {
            console.log(".search_box_in_menu - enter-key pressed.");
            console.log($(this).val());
            $(this).closest('.dropdown').trigger('click');
        }
    });

    //resetting a dirty search box
    $('.dropdown').click(function() {
        if ($(this).closest('.search_box_in_menu').val() == 'Search...') {
            console.log(".search_box_in_menu - clean searchbox.");
        }
        console.log(".dropdown - click.");
    });     
});
于 2012-06-17T15:41:37.933 に答える