Question

我有一个搜索框，当你点击它时，它会增加宽度，如果你点击它之外，它会检查是否有值，如果没有，则减少回原始尺寸。

我认为以下代码可以解决问题，但它比预期的要多一点 - 即你可以继续点击框，它会继续增长：D

即

$('#search').live('click',function(){

    $(this).animate({width:'+=60px'},300);

}).live('blur',function(){

    if($(this).val() == '') {

        $(this).animate({width:'-=60px'},300);

    }

});

我做了一个JS小提琴的情况 http://jsfiddle.net/7V93H/

如何将其转换为切换以使其正常运行？

Answer 1

var W = $('#search').width();

$(document).on({
    click: function(){
        if ($(this).width()==W) {
            $(this).animate({width: '+=60px'},300);
        }
    },
    blur: function(){
        if($(this).val() == '' && $(this).width()>W) {
            $(this).animate({width:'-=60px'},300);
        }
    }
}, '#search');

FIDDLE

更好的想法是用焦点替换click，更好的想法是在搜索框上设置宽度，并为实际值设置动画，而不是将宽度添加到现有值。

类似的东西：

$(document).on('focus blur', '#search', function(){
    $(this).animate({width: $(this).width()==200 ? 100 : 200},300);
});

Another FIDDLE

Answer 2

下面：

$('#search').live('focus',function(){

    $(this).animate({width:($(this).width()+60)+'px'},300);

}).live('blur',function(){

    if($(this).val() == '')
        $(this).animate({width:($(this).width()-60)+'px'},300);

});

通过将.live更改为.on，

将来证明这一点

http://jsfiddle.net/iambriansreed/7V93H/11/

Answer 3

这是一种方法：

var extended = false;

$('#search').live('click',function(){
    if (!extended)
    {
       $(this).animate({width:'+=60px'},300);
       extended = true;
    }
}).live('blur',function(){

    if($(this).val() == '') {
        $(this).animate({width:'-=60px'},300);
        extended = false;
    }
});

Answer 4

以上样本存在一些问题。例如：如果您在搜索框中键入内容并将其模糊，则框会无限增长。要修复它，您必须在那里放置一个空的条件或占位符条件。以下示例正在处理：

$(function() {

    $('#nav-search-input').focus(function() {
        //user has clicked on the input
        if ($(this).val() == '') {
            $(this).animate({width:'+=120px'},200);
        }
    });

    $('#nav-search-input').blur(function() {
        //user has clicked off the input

        //check its value
        if(!$(this).val()) {
            //return to old size
            $(this).animate({width:'-=120px'},200);
        }
    });
});

Answer 5

Live已弃用，请尝试此操作

$('#search').on('focus',function(){
    var $w=$(this).width();
    $(this).animate({width:$w+60+'px'},300);
})
.on('blur',function(){
    var $w=$(this).width();
    if($(this).val() == '') {
        $(this).animate({width:$w-60+'px'},300);
    }
});

一个例子是here。使用chrome，ff和IE。

更新：This one以获取动态添加的元素。

Answer 6

首先，不要使用live()，因为从jQuery 1.7开始，它已被弃用。请改用on()。

我不认为使用Click作为活页夹是个好主意，为什么不使用模糊和焦点？

$('#search').focus(function() {
   // User has clicked on the input
   $(this).animate({width:'+=60px'},300);
});

$('#search').blur(function() {
   // User has clicked off the input

   // Check its value
   if(!$(this).val()) {
      // Return to old size
      $(this).animate({width:'-=60px'},300);
   }
});

如果您希望更改更光滑，可以考虑使用animate来控制更改的速度和动作。

使用jquery增加和减小搜索框的大小

6 个答案: