1

私は Jquery モバイルを使用しており、いくつかのカスタム作業を行っています。

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

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

  1. コンテンツは、slideDown() である必要があります。
  2. ボタンが画面の上部に表示されるようにページを下にスクロールするオプションが必要です。これにより、以前に非表示になっていたコンテンツが確実に表示されるようになります。

これらのいずれかを行う方法についての指針はありますか?

4

1 に答える 1

1

私があなたを正しく理解していれば、折りたたみ可能なコンテンツブロックについて話しているので、ユーザーがヘッダーをタップすると、ボディ部分がユーザーに表示されるように少し下にスクロールする必要があります. スクロールをトリガーするヘッダーにクリックイベントを添付することでそれを行うことができます。以下のコードでは、アニメーションとして実行しています。また、ヘッダーの上にある要素の一部がユーザーに表示されるように、スクロール位置を -40px で調整しました。

$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {                        
    $('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
于 2012-04-19T08:21:16.390 に答える