我如何插入全局代码来创建所有可折叠的动画

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移动折叠幻灯片过渡，我的代码是基于，但"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);
        }   
    }); 
});

演示工作

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