jQuery 单击时保留在打开的可折叠 table 行的顶部

Question

在理想情况下，我不想为此使用 table，但事实证明它非常适合用于如此密集数据的布局 table。无论如何，当用户单击某个部分的 header 时，我希望 windwo 保留在该部分的顶部，而不是现在打开的部分的底部。我目前拥有的 javascript 是：

$(document).ready(function () {
    $('tr.parent').next('tr.child').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        var $this = $(this),
            $child = $this.closest('tr.parent').next('tr.child');
        $this.closest('tr.parent').siblings('tr.child').not($child).hide();
        $child.toggle();
    })
});

我创建了一个 Fiddle Here，因此您可以看到 html table opening/closing 和 javascript，但只需要有关如何操作的帮助单击并打开时，让内容滚动到 header/section 的顶部。

http://jsfiddle.net/aaronblomberg/jtu49v22/

提前致谢！ fiddle 示例返回将是理想的！

Answer 1

这是一个可以帮助您入门的动画卷轴：

$('a.toggle').on('click', function (e) {
    e.preventDefault();

    var $this = $(this),
        $child = $this.closest('tr.parent').next('tr.child');
    $this.closest('tr.parent').siblings('tr.child').not($child).hide();
    $child.toggle();
    // scroll heading to page top with arbitrary 60px difference
    var top = $this.offset().top -60;        
    $('html,body').animate({scrollTop: top})
});

DEMO

jQuery 单击时保留在打开的可折叠 table 行的顶部

jQuery Remain at the top of an open collapsible table row when clicked

javascript

jquery

scrolltop