Javascript .show（）导致可滚动DIV在Firefox中跳转到顶部

我有一个带行（和隐藏行）的可滚动

div

。单击其中一行会显示下一个隐藏的同级

然而，在Firefox中，单击一行会导致可滚动的

div

跳回顶部，而且只是第一次。向下滚动并单击一行，滚动条将保持在原来的位置

IE和Chrome没有重置滚动条，这是额外令人沮丧的

HTML:

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;
});

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;
});

其中一个“类似问题”链接建议。这看起来很相似，但可能不同到足以证明这个问题

---

我能做些什么来防止跳转吗？

我对您的代码进行了一些重构，问题就消失了：

您不需要

.hover（）

处理程序或

.hover

类，只需通过

：hover在css中执行即可。将此选择器替换为：
#将鼠标悬停
：

#测试装运tr.current，#测试装运tr:hover td{
背景色：#B1C3C4；
}

你不需要一个
.collapsed
类，只需将其设为默认值，并让
.expanded
覆盖默认值即可

与其显式地显示和隐藏下一行，不如基于前面的同级
.expanded
类使用css来显示和隐藏下一行。使用相邻同级选择器-
+
：

#测试装运tr.expand+tr.history{
显示：表格行；
}

通过这些css调整*您可以将JavaScript简化为：

var trackingresults={
职位：[]，
容器：{}，
数据：{}
}
trackingresults.container=$（“#测试跟踪”）；
trackingresults.container.delegate（'tr:not（.history）'，'click'，function（）{
$（this.toggleClass（“展开”）；
});

作为一个副作用，你的firefox滚动问题消失了

*再加上几个IE7黑客，请看
天哪，谢谢你的帮助。我以前没有想到要使用
：hover
，尤其是在只改变颜色的情况下。