展开时 jquerymobile 可折叠集的滚动位置

Question

我正在使用 jQueryMobile (v1.4.0) collapsible set / accordions 来显示元素列表及其内容，如 jsFiddle 所示。

<div id="List" data-role="collapsible-set">
    <div data-role="collapsible" data-content-theme="c">
       <h3>Lorem ipsum 1</h3>
       <p>Suspendisse neque...</p>
    </div>
    <div data-role="collapsible" data-content-theme="c">
       <h3>Lorem ipsum 2</h3>
       <p>Lorem ipsum...</p>
    </div>
</div> 

我遇到的问题是当项目的内容长于屏幕长度时滚动。

例如在小提琴中：

• 打开第一个可折叠项
• 滚动到底部（如果您不必滚动，请调整窗口大小，以便您必须...否则问题不可见）
• 打开第二项

=> 第一项关闭，第二项打开，但页面滚动没有改变，您现在看到第二项内容的结尾。

所以我的问题是：有没有一种聪明的方法可以强制页面在屏幕顶部设置第二个项目的“标题”？

谢谢， T.

Answer 1

一旦可折叠文件展开，将其'.offset().top 和$.mobile.silentScroll() 检索到该位置。

$(document).on("expand", "[data-role=collapsible]", function () {
  var position = $(this).offset().top;
  $.mobile.silentScroll(position);
});

更新：对于 jQuery Mobile 1.4，使用 collapsibleexpand 事件。

Demo - jQM 1.0 - 1.1

Demo - jQM 1.2 - 1.3

Demo - jQM 1.4