JQuery Mobile可折叠幻灯片转换

时间:2014-03-20 19:37:11

标签: jquery jquery-mobile animation jquery-mobile-collapsible

是否有人能够将幻灯片转换添加到JQuery Collapsible属性?

我正在尝试创建一个可以与 data-inset =&#34; false&#34; 折叠的列表,当用户点击菜单项时,折叠的部分会滑出。< / p>

以下是我尝试做的一个示例(但是使用JQuery Mobile),但是,在此示例中,转换并不像我希望的那样顺利:http://www.designgala.com/demos/collapse-expand-jquery.html

想法?

注意:我看过其他帖子有类似的目标,但是,没有一个帖子使用了我描述的转换,他们使用了淡入淡出。

1 个答案:

答案 0 :(得分:5)

这是一个非常简单和简洁的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);
        }

    });
});

这是demo in JSFiddle