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

为什么要将它绑定到 body 并总是让它尝试为搜索框设置动画，即使用户没有与之交互？

$(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);
          }

 });