我使用的是 jQueryMobile (v1.4.0) 可折叠套装/手风琴显示元素列表及其内容，如本 jsFiddle 所示.
<div data-role="collapsible" data-content-theme="c"><h3>Lorem ipsum 1 </h3><p>悬疑案...</p><div data-role="collapsible" data-content-theme="c"><h3>Lorem ipsum 2 </h3><p>Lorem ipsum...</p>
我遇到的问题是当项目的内容超过屏幕长度时滚动.
例如在小提琴中:
=> 第一项关闭，第二项打开，但页面滚动没有改变，您现在看到第二项内容的结尾.
因此我的问题是:是否有一种聪明的方法可以强制页面将第二项的标题"设置在屏幕顶部?
谢谢，
一旦可折叠对象展开，检索其' .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
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.
For instance in the fiddle:
=> 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?
Thanks,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);
});
Update: For jQuery Mobile 1.4, use collapsibleexpand event.
这篇关于展开时 jquerymobile 可折叠集的滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！