.show（）導致可滾動的DIV在Firefox中跳轉到頂部

Question

我有一個帶有行（和隱藏行）的可滾動div。點擊其中一行可顯示下一個隱藏的兄弟。

但是，在Firefox中，單擊一行會導致可滾動的div跳回到頂部，並且僅在第一次。向下滾動並單擊一行，滾動條保持原位。

IE和Chrome不會重置滾動條，這是額外的沮喪。

http://jsfiddle.net/xyan/TH4X3/

HTML：

的HTML是冗長具有足夠的信息來有一個滾動條的目的。由於它的長度，我不會在這裏發佈它。

的Javascript：

var trackingresults = { 
    pos: [], 
    container: {}, 
    data: {} 
} 
trackingresults.container = $('#test-tracking'); 
trackingresults.container.delegate('tr:not(.history)', 'click', function() { 
    if ($(this).next('tr').is(':visible')) { 
     $(this).find('td.details').removeClass('collapse').addClass('expand'); 
     $(this).removeClass('current'); 
     $(this).next('tr').hide(); 
    } else { 
     $(this).find('td.details').removeClass('expand').addClass('collapse'); 
     $(this).addClass('current'); 
     $(this).next('tr').show(); 
    } 
    return false; 
}); 
trackingresults.container.delegate('tr:not(.history)', 'hover', function() { 
    if ($(this).find('td.details').hasClass('hover')) { 
     $(this).find('td').removeClass('hover'); 
    } else { 
     $(this).find('td').addClass('hover'); 
    } 
    return false; 
}); 

其中的 「類似的問題」 鏈接建議this problem。這看起來很相似，但可能會有不同的情況來保證這個問題。

有什麼我可以做，以防止跳躍？

Answer 1

我重構你的代碼位和問題走了：http://jsfiddle.net/TH4X3/6/

你不需要.hover()處理或.hover類，只是通過:hover做在CSS。替換此選擇：#test-shipments td.hover這個：

#test-shipments tr.current, #test-shipments tr:hover td { 
    background-color: #B1C3C4; 
} 

你並不需要一個.collapsed類 - 只是使默認，讓.expanded覆蓋默認值。

而不是明確地顯示和隱藏下一行，只需使用CSS來做到這一點，基於以前的兄弟姐妹.expanded類。使用相鄰的兄弟選擇 - +：

#test-shipments tr.expand + tr.history { 
    display: table-row; 
} 

只需那些CSS樣式*您可以減少你的JavaScript，只是這樣的：

var trackingresults = { 
    pos: [], 
    container: {}, 
    data: {} 
} 
trackingresults.container = $('#test-tracking'); 
trackingresults.container.delegate('tr:not(.history)', 'click', function() { 
    $(this).toggleClass("expand"); 
}); 

而作爲一個副作用，你的Firefox的滾動問題消失！

* ^{另外一對夫婦IE7黑客，見the jsFiddle}