jQuery - 焦點/模糊顯示/隱藏輸入組

Question

我有一個2組3個輸入的小表格。

每組只有一個輸入可見。

如果我焦點的輸入，所有在同一組中被示出。

如果沒有該組的輸入被聚焦時，僅第一個應該出現。

$('input').focus(function() { 
    $(this).closest('div').addClass('focused'); 
}).blur(function() { 
    $(this).closest('div').removeClass('focused'); 
}) 

這個工作在Chrome，但不能在Firefox（請my fiddle）。
在獲得焦點之前，右側輸入都被隱藏。
似乎事件泡泡順序在兩個瀏覽器上都不同。

有人可以幫我做這項工作的所有瀏覽器？

Answer 1

您可以添加一個小的延遲來防止這種情況發生。

$('input').focus(function() { 
    var $parent = $(this).closest('div'); 
    var timeoutId = $parent.data('tid'); 

    if (timeoutId) { 
     // Aborting the blur 
     clearTimeout(timeoutId); 
    } 

    $parent.addClass('focused'); 
}).blur(function() { 
    var $parent = $(this).closest('div'); 

    var tid = setTimeout(function(){ 
     $parent.removeClass('focused'); 
    }, 1); 

    $parent.data('tid', tid); 
}) 

http://jsfiddle.net/b439u/5/