更改焦点上的高度元素

Question

我使用jQuery Chosen创建了一个用户友好的多项选择。选择多个元素时，多个选择容器div的高度会增加。我想只在容器div处于焦点时保持这个高度。但如果没有聚焦则获得固定的高度。

如果对焦（身高：自动）：

其他（身高：40px）：

这就是我所做的：

$('.chosen-container-active .chosen-choices').live('focus',function(){
    var autoHeight = $(this).css('height', 'auto').height();
    $(this).height(40).animate({height:autoHeight},300);
}).live('blur',function(){
    if($(this).val() == '') {
        $(this).animate({height:50},300);
    }
});

这很好但我无法选择所有元素。我做错了什么？ jsFiddle

感谢您的帮助！

Answer 1

我解决了以下问题：

$('.chosen-container-multi').live('focus', function(event) {   
    var select = $('.chosen-container-multi').find(".chosen-choices");
    var curHeight =  select.height();
    var autoHeight = select.height();

    curHeight = select.height();
    autoHeight = select.css('height', 'auto').height();
    select.height(curHeight).animate({height: autoHeight}, 300);

    event.stopPropagation();
}).live('blur',function(){
    $('.chosen-container-multi').find(".chosen-choices").animate({height: 30}, 300);
});

jsFiddle

但是当我选择一个选项时，高度动画为30px，然后返回auto（查看选择两个以上的元素）。我该如何防止这种行为？