更改焦点上的高度元素

Mustapha Aoussar 发表于 Dev

穆斯塔法·奥萨尔（Mustapha Aoussar）

我有一个使用jQuery Chosen创建的用户友好型多项选择。选择多个元素时，多重选择容器div的高度会增加。我只想在容器div处于焦点时保持此高度。但是，如果不集中精力，则获得固定的高度。

如果聚焦（高度：自动）：
在此处输入图片说明

其他（高度：40像素）：
在此处输入图片说明

这是我所做的：

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

感谢您的任何帮助！

穆斯塔法·奥萨尔（Mustapha Aoussar）

我解决了如下问题：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。