Question

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

我想要完成的是当点击可折叠标题时，浏览器应滚动到该div的顶部，以便内容在用户的完整视图中。我使用了一个on click事件，它在第一个可折叠时工作正常。但是，如果你有一个开放的可折叠，你点击另一个打开它，它不会正确地滚动到被点击的div的顶部（它将滚动到正文的中间，或者高于顶部的顶部） div）。

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

我能够通过编辑Materialize JS本身来完成我想要做的事情。以下是该行在编辑之前的显示方式：

＆＃13;

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

＆＃13;

我将以下内容添加到上述声明的完整部分，以完成我正在寻找的内容：

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

问题：我不想编辑Materialise第三方代码来完成我需要的工作，因此我需要找到一种方法来在完成下滑后实现body动画代码，编辑Materialise动画。我知道必须有办法吗？

我在可折叠的机身上尝试了事件队列，这似乎很有希望，但我的测试控制台打印在动画期间执行。见下文。如果有人能指出我可以尝试的其他方向，我将非常感激。

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

console.log('DONE');

});

Answer 1

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

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

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

1 个答案: