第三方滑倒动画后如何执行代码？

Question

背景：我正在使用物化 JS创建可折叠的div。 单击具有可折叠标头类的div时，在具有一类可折叠体的同级div上会发生向下滑动动画，显示可折叠体的内容。

我要完成的工作是，单击可折叠的标题时，浏览器应滚动到该div的顶部，以便用户可以看到所有内容。 我使用了on click事件，该事件在第一个可折叠对象上效果很好。 但是，如果您有一个打开的可折叠鼠标，然后单击另一个打开它，它将无法正确滚动到所单击的div的顶部（它将滚动到主体的中间，或者位于div顶部的上方）。

点击功能的JS Fiddle： https ： //jsfiddle.net/f83dct8f/4/

通过编辑Materialize JS本身，我可以完成我想做的事情。 这是我编辑之前的样子：

 object.siblings('.collapsible-body').stop(true, false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() { $(this).css('height', ''); } }); 

我将以下内容添加到上述语句的完整部分中，以完成所需的操作：

$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');

问题：我不想编辑Materialize 3rd Party代码来完成所需的操作，因此，我需要找到一种方法，在向下滑动完成后无需编辑Materialize动画即可实现人体动画代码。 我知道必须有一种方法吗？

我在可折叠主体上尝试了事件队列，这看起来很有希望，但是我的测试控制台打印在动画过程中执行。 见下文。 如果有人能指出我正确的方向，我将不胜感激。

$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){    

console.log('DONE');

});

Answer 1

初始化.collapsible时，您应该可以使用onOpen选项。 传递一个函数以在打开手风琴时执行。 该函数接收元素作为参数。

$(document).ready(function() {
    $('.collapsible').collapsible({
        onOpen: function(el) {
            $('body').animate({scrollTop: el.offset().top },'slow');
        }
    });
});