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

Question

背景： 我正在使用materialize JS创建可折叠的div。当单击具有可折叠标题类的div时，会在具有可折叠主体类的同级div上出现向下滑动动画，以显示可折叠主体的内容。

我想要完成的是当单击可折叠标题时，浏览器应该滚动到该div的顶部，以便内容完全显示在用户的视图中。我已经使用了点击事件，这在第一个可折叠的应用程序中运行良好。但是，如果你有一个开放的可折叠的，你点击另一个来打开它，它不会正确滚动到被点击的div的顶部（它会滚动到主体的中间，或者位于div顶部的上方）。

上点击功能JS小提琴：https://jsfiddle.net/f83dct8f/4/

我能做到什么，我期待通过编辑Materialise的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'); 

问题：我不想编辑Materialise第三方代码来完成我需要的功能，所以我需要找到一种方法来在滑动完成后实现主体代码编辑而不编辑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'); 
     } 
    }); 
});