如何使用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);
});