我的CSS问题似乎无法弄清楚

Question

我似乎无法想出这个。我在http://rayku.com/start的网页上有一个文本框，当有人开始输入时，它会在其下面展开一个表单：

expanded form http://snpr.cm/iurnmx.jpg

它应该如何工作是如果您从文本框中取消选择而不键入任何内容，它将返回其原始状态。但是，它似乎工作得太好了，如果我点击它下面的表单上的任何内容，它将返回其原始状态。

如果我没有在文本框中输入任何内容并且我没有点击下面表单上的任何地方，我如何更改它以便它只会返回到其原始状态？

谢谢！

Answer 1

在允许“关闭”动画之前，您需要检查字段的值。像这样：

//store object in var for efficiency
var mainQuestion = $('.main-question input');
var initialValue = mainQuestion.val();

mainQuestion.focus(function(){
    //blank out field on focus
    if(mainQuestion.val() == initialValue){
        mainQuestion.val('');
    }
    //animate opening here
});

mainQuestion.blur(function(){
    //check to see if user has typed anything in
    if((mainQuestion.val() == initialValue) || !mainQuestion.val().length ){
        //reset value
        mainQuestion.val(initialValue);
        //animate closing here
    }
});