jquery - jQuery Mobile 可折叠幻灯片过渡

Question

有没有人能够向 JQuery Collapsible 属性添加幻灯片转换？

我正在尝试制作一个可使用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 中的演示。