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/