jquery-mobile - 如何使用 jquery mobile 为可折叠对象的打开和关闭设置动画？

Question

我正在使用 Jquery mobile 并做一些自定义的东西。

默认的可折叠对象似乎只是立即“显示”隐藏的内容，我觉得这对用户有点不友好。这样做会出现一些问题，如果按钮位于屏幕底部，并且隐藏的内容不在屏幕上，那么用户可能不知道任何事情都发生了。

在我看来，应该发生两件事。

1. 内容应该是slideDown()。
2. 我应该可以选择让页面向下滚动，以便按钮位于屏幕顶部，这样做可以保证以前隐藏的内容是可见的。

关于我如何做这些中的任何一个的任何指示？

Answer 1

如果我理解正确，您说的是可折叠的内容块，当用户点击标题时，它应该向下滚动一点，以便向用户显示正文部分。您可以通过将点击事件附加到触发滚动的标题来实现。在下面的代码中，我将其作为动画完成。我还用 -40px 调整了滚动位置，这样用户仍然可以看到标题顶部的部分元素。

$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {                        
    $('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});