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/

jquery点击关闭功能

3 个答案: