7

このjsFiddleに示すように、jQueryMobile (v1.4.0)折りたたみ可能なセット/アコーディオンを使用して、要素とそのコンテンツのリストを表示しています。

<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>

私が抱えている問題は、アイテムのコンテンツが画面の長さよりも長い場合のスクロールです。

たとえば、フィドルで：

  • 最初の折りたたみ可能なアイテムを開く
  • 一番下までスクロールします (スクロールする必要がない場合は、スクロールする必要があるようにウィンドウのサイズを変更します...そうしないと、問題は表示されません)
  • 2 番目のアイテムを開く

=> 最初のアイテムが閉じられ、2 番目のアイテムが開かれますが、ページのスクロールは変わらず、2 番目のアイテムのコンテンツの最後が表示されます。

したがって、私の質問:画面の上部にある 2 番目の項目の「ヘッダー」をページに強制的に設定するスマートな方法はありますか?

ありがとう、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 に答える