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

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

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

类似于:

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

Another FIDDLE