jquery mobileで折りたたみ可能なオブジェクトの開閉をアニメーション化する方法は？

Question

私はJqueryモバイルを使用していて、カスタムのものをやっています。

デフォルトの折りたたみ可能なオブジェクトは、ただちに隠されたコンテンツを「表示」しているように見えますが、これはちょっとしたユーザーにとって不公平です。ボタンが画面の最下部にあり、隠れたコンテンツが画面外にある場合、ユーザーは何か起きたことを知らないかもしれないという点で、いくつかの問題が発生します。

私の考えでは、2つのことが起こるはずです。

1. コンテンツは、slideDown（）である必要があります。
2. ボタンが画面の上部で見つかるようにページをスクロールさせるオプションが必要です。そうすることで、以前は非表示のコンテンツが表示されていることが保証されます。

どのように私はこれらのいずれかを行うことについて行くかもしれませんか？

Answer 1

あなたが正しく理解していれば、折りたたみ可能なコンテンツブロックについて話しています。ユーザーがヘッダーをタップすると、本体部分がユーザーに見えるように少し下にスクロールする必要があります。 スクロールをトリガーするクリックイベントをヘッダーにアタッチすることで実行できます。下のコードではアニメーションとして行っています。また、ユーザーがヘッダーの上にある要素の一部をまだ見ているように、-40ピクセルでスクロール位置を調整しました。

$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {       
    $('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500); 
});