Question

我是jquery的新手，我有点不解决这个问题。所以我有一个搜索框（.search），我想点击它时调整大小。这确实有效，搜索域变得“更大”。但是，当我在搜索字段外单击时，我希望它再次成长。我尝试用“body”-click-method来做这件事。但它不起作用。

所以这是我的代码：

$(function() {
$('.search').click(function() {
    $('.search').css('width', '450px');
});});

另一个问题：如何将此更改与动画结合使用？

Answer 1

$('.search').focus(function() {
     $('.search').css('width', '450px');
});
$('.search').blur(function() {
     $('.search').css('width', 'auto');
});

如果要为宽度更改设置动画，可以执行以下操作：

$('.search').focus(function() {
     $('.search').animate({width: '450px'});
});
$('.search').blur(function() {
     $('.search').animate({width: '150px'});
});

否则，如果您希望为其他对象设置动画，则可以执行此操作：

$('.search').focus(function() {
     $('.search').css('width', '450px');
     $('#id_to_animate').animate({width: '200px'});
});
$('.search').blur(function() {
     $('.search').css('width', '150px');
     $('#id_to_animate').animate({width: '100px'});
});

Answer 2

您可以使用jQuery blur事件在失去焦点后重新调整元素的大小：

http://api.jquery.com/blur

调整字段大小并重新调整外部点击

2 个答案: