Question

我有一个带有行（和隐藏行）的可滚动div。单击其中一行会导致显示下一个隐藏的兄弟。

但是，在Firefox中，单击某行会导致可滚动的div跳回到顶部，而且只是第一次。向下滚动并单击一行，滚动条将保持原样。

IE和Chrome不会重置滚动条，这更令人沮丧。

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覆盖默认值。

不是显式地显示和隐藏下一行，而是根据之前的兄弟.expanded类使用css来完成它。使用相邻的兄弟选择器 - +：

#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}

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

1 个答案: