页面加载时的 JQuery Mobile 事件

Question

我正在使用此代码为 html5+jquryMobile 应用程序中的可折叠内容制作动画...我将其添加到我的脑海中:

$(document).on('expand', '.ui-collapsible', function() {
   $(this).children().next().hide();
   $(this).children().next().slideDown(500);
})

$(document).on('collapse', '.ui-collapsible', function() {
   $(this).children().next().slideUp(500);
});

当我点击可折叠的头部时它工作正常...我想将它用于我所有的可折叠元素但在某些页面中我希望在页面加载后自动播放动画...有人可以帮助我吗？!？

Answer 1

工作示例:http://jsfiddle.net/Gajotres/vmZyn/

$(document).on('pageshow', '#index', function(){       
    $('.ui-collapsible').children().next().hide();
    $('.ui-collapsible').children().next().slideDown(1500);
});

您想使用 pageshow 事件。在那个时候页面你可以动画滑动。

如果你只想做一个(比如文档就绪)，请改用以下语法:

$(document).on('pageinit', '#index', function(){       
    $('.ui-collapsible').children().next().hide();
    $('.ui-collapsible').children().next().slideDown(1500);
});

不同于pageshow， pageinit 只会触发一次。