在页面外单击时，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

JSFiddle Link -- Click this link..试试这个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();
});