jquery点击关闭功能答案

【问题标题】：jquery click off functionjquery点击关闭功能
【发布时间】：2012-12-30 23:02:43
【问题描述】：

我正在尝试创建一个单击后会展开的搜索栏。当用户点击其他地方时，搜索栏将恢复正常状态。

我没有设法做到这一点，但在点击时将其展开。任何帮助都会很棒

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

【问题讨论】：

标签： jquery click jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

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

 });

【讨论】：

你不使用 e.target 而不是 "#search"（在 if 语句的第一部分）？
因为当您定位外部搜索时，它会为该目标设置动画，但我想我可以将第一个动画更改为 e.target
因此我说“if 语句的第一部分”：-P @anton
我想我会修复我的问题并“借用”你的 e.target.id 想法。希望你不要介意^_^

【解决方案3】：

为什么将它绑定到 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/

【讨论】：

呵呵，甚至使用focus 和blur 都可以！ +1