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 只会触发一次。

Answer 2

试试这个

<body onLoad='expand();'>

然后将必要的东西放在函数中

<script>
 function expand()
{
$(this).children().next().hide();
   $(this).children().next().slideDown(500);
}
</script>

Answer 3

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

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

$( document ).on( "pageinit", "#some-page", function() {
   ...
});

页面加载上的JQuery Mobile事件

3 个答案: