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中的一个演示.