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

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

}); 

Answer 3

爲什麼將其綁定到身體，總是有它試圖動畫即使用戶不與它交互的搜索框？

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

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