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

Question

我正在使用jQueryMobile(v1.4.0)可折叠集/手风琴来显示元素及其内容的列表,如此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事件.

演示 - jQM 1.0 - 1.1

演示 - jQM 1.2 - 1.3

演示 - jQM 1.4