停止焦点外的动画

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容器外的项目（包含选项的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);
});