私はJquery Mobile + html5 + PhoneGapを使用してアプリを開発しています...マルチページテンプレートを使用しています...すべてのアプリのページは同じ.htmlにあります...次のようなものです:
<!--********* HOME *************-->
<div data-role="page" id="home">
<div data-role="content">
.....
</div>
<div data-role="footer" data-position="fixed" id="footer">
<a href="#menu" data-role="button" dataicon="home" data-transition="fade" id="credits"> </a>
</div>
</div>
<!--********* HOME *************-->
<!--********* MENU *************-->
<div data-role="page" id="home">
<div data-role="content">
.....
</div>
<div data-role="footer" data-position="fixed" id="footer">
<a href="#menu" data-role="button" dataicon="home" data-transition="fade" id="credits"> </a>
</div>
</div>
<!--********* MENU *************-->
等々...
一部のページでは、いくつかのアニメーションを実装しています...折りたたみ可能な要素の自動オープンなど
$(document).on('pageshow', '#mostra_menu, #regina_menu, #cultura_menu, #restauro_menu', function(){
$('.ui-collapsible').children().next().hide();
$('.ui-collapsible').children().next().slideDown(300);
});
これはうまく機能します...問題は、同じページをリロードすると-#mostra_menu、...-折りたたみ可能ファイルがまだ開いていることです...
アニメーション化された .gif がある他のページでも同じ問題が発生します...ページを初めてロードすると、アニメーションが正常に開始されます...アプリをナビゲートしてから、.gif を含むページをリロードすると、アニメーションは動作しません始める...
問題は複数ページのhtmlにあると思います...それは一度読み込まれます...そのため、再訪したすべてのページが再読み込みされません...
どうすれば修正できますか?!