如何插入全局代码来为所有可折叠对象创建动画？

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

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

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);
        }   
    }); 
});

Working DEMO

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

如何插入全局代码来为所有可折叠对象创建动画？

How do I insert global code to create animation for all collapsibles?

jquery

jquery-mobile