我正在使用 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中……它被加载了一次……所以所有重新访问的页面都没有重新加载……
我该如何解决？！