3

我正在使用此代码为 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);
});

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

4

3 回答 3

3

工作示例：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只会触发一次。

于 2013-04-18T11:33:11.460 回答
0

JQM 有自己的事件，您需要挂钩。此处的文档：http: //api.jquerymobile.com/category/events/

如果要在某些页面上触发事件，请使用以下语法：

$( document ).on( "pageinit", "#some-page", function() {
   ...
});
于 2013-04-18T11:34:29.730 回答
0

尝试这个

<body onLoad='expand();'>

然后把必要的放在一个函数中

<script>
 function expand()
{
$(this).children().next().hide();
   $(this).children().next().slideDown(500);
}
</script>
于 2013-04-18T11:27:47.853 回答