jquery - 更改焦点上的高度元素

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，然后返回自动（查看选择两个以上的元素）。如何防止这种行为？