展开时jquerymobile可折叠集的滚动位置 [英] Scroll position of a jquerymobile collapsible set when expanded

问题描述

我正在使用jQueryMobile（v1.4.0）可折叠集/手风琴显示元素及其内容列表，如 jsFiddle 所示。

I am using a jQueryMobile (v1.4.0) collapsible set / accordions to display a list of elements and its content as shown in this 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> 

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

The problem I have is with scrolling when the content of an item is longer than the length of the screen.

例如在小提琴中：

• 打开第一个可折叠项目


• 滚动到底部（如果您不必滚动，请调整窗口大小以便您必须...否则问题不可见）


• 打开第二项

=>第一项已关闭，第二项已开启，但页面滚动不会改变，你现在看到第二项内容的结束。

=> the first item is closed and the second item is opened, but the page scrolling doesn't change and you now see the end of the second item's content.

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

Thus my question: Is there a smart way to force the page to set the "header" of the second item at the top of the screen?

谢谢，
T。

Thanks, T.

推荐答案

一旦可折叠展开，检索其' .offset（）。top 和 $。mobile.silentScroll（） t那个位置。

Once a collapsible is expanded, retrieve its' .offset().top and $.mobile.silentScroll() to that position.

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

更新：对于jQuery Mobile 1.4，请使用 collapsibleexpand event。

Update: For jQuery Mobile 1.4, use collapsibleexpand event.

演示 - jQM 1.0 - 1.1

Demo - jQM 1.0 - 1.1

演示 - jQM 1.2 - 1.3

Demo - jQM 1.2 - 1.3

演示 - jQM 1.4

Demo - jQM 1.4

这篇关于展开时jquerymobile可折叠集的滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！