hide() 和 show() 导致页面偶尔跳转答案

【问题标题】：hide() and show() causes page to jump sporadicallyhide() 和 show() 导致页面偶尔跳转
【发布时间】：2017-05-01 15:46:20
【问题描述】：

我有一个表格，其中填充了用户正在寻找的工作的详细信息。结构类似于这样：

<div class="container">
    <table class="table-responsive table-hover table-bordered col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1" id="resultsTable" border="0" cellspacing="0" cellpadding="0"><tbody>
        <tr class="selectable selected">
            <td class="summary">A Summary</td>
        </tr>
        <tr>
            <td class="detail" id="32113607" style="display: table-cell;">This is some detail</td>
        </tr>
<!-- And so on ....................... -->
    </tbody></table>
</div>

然后我有一个函数来处理表格行的展开和收缩。

$(function () {

    //When clicking a row in the table, hide the other rows...
    $("#resultsTable").on('click', '.selectable', function (e) {
        $(this).addClass('selected').siblings().removeClass('selected');
        $(this).siblings().children("td.detail").slideUp();

        $(this).next("tr").children("td.detail").slideDown();
    });
});

还有一些基本的 CSS，但没什么大不了的。这一切都在这里：http://jsfiddle.net/v9ec3/1176/

奇怪的是，如果你从底部开始向上工作，它没有任何问题。如果您从顶部开始向下工作，它将跳过其中一条记录。

在开发工具中逐步完成后，看起来 jQuery 正在尝试帮助移动以抵消幻灯片。

我试过了：

e.preventDefault()
e.stopPropogation()
设置宽度/高度
设置溢出-y
动画（即转到 id x）
CSS 过渡

【问题讨论】：

只有当您滚动过去打开的一个并打开下一个时，它才会跳来跳去。这当然是意料之中的，因为页面保持当前滚动位置，而您没有做任何修改。它从底部开始起作用，因为它再次保持当前滚动位置，即底部。
@KevinB 是的，我确实考虑过。我明白为什么它会尝试那样工作。我确实尝试使用 id 将页面移动到那里，但也许我的时间与 slideUp 和 slideDown 冲突。正如您提到的当前滚动位置，我还能做什么？我可以得到高度 pre-slideUp，并将滚动调整 x 像素吗？还是我只是错过了一些非常明显的东西？
类似这样的：stackoverflow.com/questions/10836428/… 您必须决定新滚动位置的基础是什么，是您要隐藏的内容的高度还是之前的滚动位置。更复杂的是，您还展示了更多内容。
@KevinB 。非常感谢您的推荐。我必须承认我没有看到。我见过 scrollTop 的 getter 用于动画，但不是 setter。我会发布我的问题的答案，因为它现在正在工作。希望我可以为 cmets 提供代表。 :)

标签： javascript jquery html css

【解决方案1】：

多亏了 Kevin B 的链接（我之前没有找到），我才能够弄清楚保持元素到位所需的条件：

$("#resultsTable").on('click', '.selectable', function (e) {

        var prevSelectedHeight = $(".selectable.selected ").next("tr").height();
        var currentScrollTop = $(window).scrollTop();

        $(this).addClass('selected').siblings().removeClass('selected');
        $(this).siblings().children("td.detail").hide();

        if (currentScrollTop > prevSelectedHeight) {
            $(window).scrollTop(currentScrollTop - prevSelectedHeight)
        }
        $(this).next("tr").children("td.detail").slideDown();
});

这现在适用于大多数情况。有一些边缘情况，页面滚动到底部，元素向上移动。但是，对于列表中的绝大多数项目，它运行良好。

【讨论】：