jquery - 在焦点之外停止动画

Question

我有一个使用jQuery Chosen创建的用户友好的多项选择。选择多个元素时容器 div 的高度会增加，如果容器 div 处于焦点位置，我将高度设置为自动，但如果处于模糊状态，我将其设置为固定高度。

$('.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).stop(true, true).animate({height: autoHeight}, 300);

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

jsFiddle

问题是，当我单击 div 容器外的项目（包含options的 div ）时，高度会变为 30px，然后返回到 auto （参见上面的 gif 图像）。如何防止这种行为？

太感谢了！对不起我的英语不好！:)

Answer 1

您需要在blur两个元素的父元素上强制转换回调函数，而不仅仅是在输入元素上，因为插件将在同一个父元素内的输入字段之后创建另一个元素。我已经更新了你的jsFiddle

$('.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).stop(true, true).animate({
        height: autoHeight
    }, 300);

    event.stopPropagation();
});

// !! Selector of the parent
$('.chosen-select').live('blur', function () {
    $('.chosen-container-multi').find(".chosen-choices").animate({
        height: 30
    }, 300);
});