7

我正在使用 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。

4

1 回答 1

12

展开可折叠项后，将其'.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

于 2013-12-19T16:02:14.767 回答