bootstrap在頁面外單擊時返回以前的狀態

Question

這裏是我所做的輸入字段，但是我很難通過單擊表單div之外的單擊將輸入字段返回到其先前的狀態。我正在嘗試製作類似twitter.com的帖子。

heres the jsfiddle link ive made

$('#askinput').click(function(){ 
     $(this).stop().animate({ 
     height:'100px' 
    }); 
    $('#collapseExample').show(); 
    $('.ask-input-glyph').hide(); 
});

#ask-form-div 
{ 
    background-color: #F3EED8; 
} 
#askinput 
{ 
    height: 44px; 
} 
.ask-input-glyph 
{ 
    background-color: #4A6B69; 
    color: #ffffff; 
    padding: 10px; 
    z-index: 3; 
    position: absolute; 
    top: 25px; 
    left: 21px; 
}

<div class="col-md-11" id="ask-form-div"> 
          <form role="form"> 
           <div class="form-group"> 
            <label class="control-label" for="formInput69"></label> 
            <input type="text" class="form-control text-right" id="askinput" placeholder="Placeholder text"> 
            <i class="glyphicon glyphicon-pencil ask-input-glyph"></i> 
            <div id="collapseExample" style="display:none"> 
             <p>1. Climb a tree<input type="checkbox"/></p> 
            </div> 
           </div> 
          </form> 
         </div>

Answer 1

​​試試這個，use focus and blur events

$("#askinput").focus(function() { 
    $(this).stop().animate({ 
     height:'100px' 
    }); 
    $('#collapseExample').show(); 
    $('.ask-input-glyph').hide(); 
}).blur(function() { 
    $(this).stop().animate({ 
     height:'44px' 
    }); 
    $('#collapseExample').hide(); 
    $('.ask-input-glyph').show(); 
});