javascript - .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}