javascript - 展开时 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> 

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

例如在 fiddle 中:

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

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

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

谢谢，

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