Question

使用JQM 1.4.5。

我正在尝试动画所有可折叠内容，以便在标题时滑动打开和关闭。我几乎有这个工作：

$(document).on('collapsibleexpand', '.animateMe', function() {
    $("[data-role='collapsible']").collapsible({

        collapse: function( event, ui ) { 
            $(this).children().next().slideUp(150);
        },  
        expand: function( event, ui ) { 
            $(this).children().next().hide();
            $(this).children().next().slideDown(150);
        }   
    }); 
});

此代码的问题是我必须在动画代码启动之前点击至少一个可折叠的内容。

我可以这样做：

$(document).on("pageinit", "#pageA", function(){
   /* ABOVE CODE GOES HERE */
});

此解决方案的问题是我必须为每个页面编写此代码。我在JQuery Mobile Collapsable Slide Transition尝试了我的代码所基于的解决方案但是“pageinit”似乎根本不起作用而没有给它一个页面参数。

那么如何将这个动画代码放入我的js文件中，以便所有页面中的所有可折叠文件都被触发？

Answer 1

您可以使用可折叠小部件和事件委派的create事件来确保它在动态添加的可折叠项上运行：

http://api.jquerymobile.com/collapsible/#event-create

$(document).on("collapsiblecreate","[data-role='collapsible']",  function( event, ui ) {
    $(this).collapsible({   
        collapse: function( event, ui ) { 
            $(this).children().next().slideUp(450);
        },  
        expand: function( event, ui ) { 
            $(this).children().next().hide();
            $(this).children().next().slideDown(450);
        }   
    }); 
});

正在使用 DEMO

在我的演示中，我将事件附加到第一页的pagebeforeevent中。只要在初始化任何非动态可折叠项之前运行，您就可以使用mobileinit或其他事件。

如何插入全局代码以为所有可折叠项创建动画？

1 个答案: