jquery单击关闭函数

我正在尝试创建一个搜索栏，一旦单击它就会展开。当用户单击其他位置时，搜索栏将返回其正常状态

我还没有做到这一点，但已经使它扩大点击。任何帮助都会很好

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

---

演示：

为什么要将它绑定到身体上，并始终让它尝试设置搜索框的动画，即使用户没有与它交互

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

---

jshiddle:

Y你不使用

e.target

而不是

“#search”

（在if语句的第一部分）？因为当你将外部搜索作为目标时，它会将该目标动画化，但我想我可以将第一个动画化为e.target。因为我说了“if语句的第一部分”：-p@antonI我想我要修复我的和“借用”你的

e.target.id

想法。我希望你不介意^ ^ ^呵呵，甚至使用

focus

和

blur

都可以<代码>+1

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

 });

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