2

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

我还没有设法做到这一点,但已经让它在点击时展开。任何帮助都会很棒

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

3 回答 3

4
$("#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/

于 2013-01-16T15:16:43.213 回答
1

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

于 2013-01-16T15:31:54.790 回答
1
$('body').click(function(e){
       if( e.target.id == 'search' )
          {      
              $(e.target).animate({ "width": "200px"},400);
          }
       else
          { 
             $('#search').animate({ "width": "100px"},400);
          }

 });
于 2013-01-16T15:18:31.973 回答