javascript - hide() 和 show() 导致页面偶尔跳转

Question

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

<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 过渡

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

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