更改焦点上的高度元素(Change height element on focus)

更改焦点上的高度元素(Change height element on focus)

我有一个使用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

感谢您的任何帮助！

I have a user-friendly multiple select created using jQuery Chosen. The height of the multiple select container div increases when selecting multiple elements. I want to keep this height only if the container div is on focus. But if is not on focus get a fixed height.

if on focus (height:auto):

else (height:40px):

This is what I did:

$('.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); } });

This works fine but i can't select all elements. What did I do wrong? jsFiddle

Thank you for any help!

最满意答案

我解决了这个问题如下：

$('.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（查看选择两个以上的元素）。 我该如何防止这种行为？

I solved the problem as follows:

$('.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

But when I select an option the height is animated to 30px and then returns auto (to see select more than two elements). how do I prevent this behavior?