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（）
设置宽度/高度
设置overflow-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();
});

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

hide（）和show（）会导致页面偶尔跳转

1 个答案: