jquery - jqueryクリックオフ機能

Question

クリックすると展開する検索バーを作成しようとしています。ユーザーが他の場所をクリックすると、検索バーは通常の状態に戻ります。

私はこれを行うことができませんでしたが、クリックすると展開しました。どんな助けでも素晴らしいでしょう

$(document).ready(function(){
    $("#search").click(function(){
        $(this).animate({ "width": "200px"},400);
    }); 
});

Answer 1

$("#search").on('click', function(){
    $(this).animate({ "width": "200px"},400);
}); 

$(document).on('click', ':not(#search)', function(e){ 
    //when you click somewhere that is **not** search
    if(e.target.id !== 'search') {
        $("#search").animate({ "width": "50px"},400);
    }
}); 

デモ： http： //jsfiddle.net/maniator/2W2z4/

Answer 2

なぜそれを本体にバインドし、ユーザーが検索ボックスを操作していないときでも、常に検索ボックスをアニメーション化しようとするのですか？

$(document).ready(function () {
    $("#search").focus(function () {
        $(this).animate({ "width": "600px" }, 400);
    }).focusout(function () {
        $(this).animate({ "width": "400px" }, 400);
    });
});

jsFiddle： http: //jsfiddle.net/2W2z4/3/

Answer 3

$('body').click(function(e){
       if( e.target.id == 'search' )
          {      
              $(e.target).animate({ "width": "200px"},400);
          }
       else
          { 
             $('#search').animate({ "width": "100px"},400);
          }

 });