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

Одна из ссылок "Похожие вопросы" предложила эту проблему.Это кажется похожим, но может быть иным, чтобы оправдать этот вопрос.

Могу ли я что-нибудь сделать, чтобы предотвратить прыжки?

Answer 1

Я немного реорганизовал ваш код, и проблема исчезла: http://jsfiddle.net/TH4X3/6/

Вам не нужен обработчик .hover() или класс .hover, просто сделайте это в css через :hover. Замените этот селектор: #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, см. jsFiddle}