JQuery移动可折叠幻灯片过渡

Question

有没有人能够添加一个幻灯片过渡到JQuery的折叠属性?

我正在尝试用data-inset="false"制作一个可折叠的列表，当用户点击菜单项时，折叠的部分滑出。

下面是我正在尝试做的一个例子(但使用JQuery Mobile代替)，然而，在这个例子中，过渡并不像我希望的那样顺利:http://www.designgala.com/demos/collapse-expand-jquery.html

想法?

注意:我看到过其他有类似目标的帖子，但是，没有一个帖子使用了我描述的过渡，他们使用了渐变。

Answer 1

这是一个非常简单和简洁的JS，我用它来动画我的可折叠集。

$(document).on('pageinit', 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);
        }
    });
});

下面是JSFiddle中的一个演示