更改高度元素的焦點

我有一個用戶友好的多選擇創建使用jQuery Chosen。選擇多個元素時，多個選擇容器div的高度會增加。我只想在容器div焦點時保持這個高度。但如果不在焦點上得到一個固定的高度。更改高度元素的焦點

如果對焦點（高度自動）：
enter image description here

其他（高度：40像素）：
enter image description here

這是我做過什麼：

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

謝謝任何幫助！

來源

2013-10-11 Mustapha Aoussar

對於初學者來說，'live'已被棄用。使用'on'。 –

我正在使用jquery 1.8.3，'.live（）'工作正常。問題是，當我點擊'div.chosen-drop'來選擇一個選項時，包含所選選項的上述div不會正確地爲高度設置動畫，因爲焦點僅爲該div指定。 –

我必須將焦點方法分配給兩個div。但我不知道如何......我試着用'$（'。selected-choices，.chosen-drop'）。live（'focus''，但不起作用。 –

我解決了這個問題，如下所示：

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

但是，當我選擇的高度是動畫，以30像素的選項，然後返回汽車（查看選擇兩個以上的元素）。我如何防止這種行爲？

來源

2013-10-14 10:48:28

更改高度元素的焦點

回答

相關問題