0

#search_inputフォーカスすると展開する検索入力（ ）があります。特定の検索オプションを選択できる追加の検索オプションがポップアップ表示されます。

入力はぼかした後に収縮する必要がありますが、ぼかしがフォームの外部でトリガーされた場合に限ります。

http://jsfiddle.net/zMp9S/

現在、検索オプションメニューからオプションを選択しているだけでも、検索入力を早めに縮小する次のものを使用しています。

$(function() {
    $("#search_input").focus(function(){
        $("#search_input").stop().animate({width: 310}, 200);
        $("#search_options").show();
    })
    $("#search_input").blur(function(){
        $("#search_input").stop().animate({width: 100}, 200);
        $("#search_options").hide();
    })        
});​

フォームにフォーカス/ブラーイベントを配置しても機能しません。

#search_inputフォームの外側でブラーが発生した場合にのみコントラクトするようにjQueryに指示するにはどうすればよい#search_formですか？

4

1 に答える 1

1

ウィンドウのクリックイベントにバインドする必要があります。バインドしないと、ユーザーがdivのフォーカスを失っているかどうかを検出できません（実際にはフォーカス/ブラーイベントがありません！）

  $(window).click(function(e) {
        if (e.target.id != 'search_options' && e.target.parentNode.id != 'search_options' && e.target.id != 'search_input') {
            $("#search_input").stop().animate({
                width: 100
            }, 200);
            $("#search_options").hide();
        }
    });

http://jsfiddle.net/zMp9S/9/

于 2012-08-02T13:23:18.650 に答える