Question

在一个理想的世界中，我不想为此使用表格，但它被证明是这种强烈数据表布局的理想选择。无论如何，当用户点击某个部分的标题时，我希望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，因此您可以看到使用javascript打开/关闭html表格，但只需要帮助我们了解如何在点击时将内容滚动到该标题/部分的顶部并打开了。

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

提前谢谢！一个小提琴背面将是理想的！

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单击时保留在打开的可折叠表行的顶部

1 个答案: