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>

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

例如在小提琴中：

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

=＆GT;第一个项目已关闭，第二个项目已打开，但页面滚动不会更改，您现在看到第二个项目内容的结尾。

因此我的问题：是否有一种智能方法可以强制页面设置屏幕顶部第二项的“标题”？

谢谢，吨。

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

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

1 个答案: