【问题标题】:JQuery Mobile Collapsable Slide TransitionjQuery Mobile 可折叠幻灯片过渡
【发布时间】:2014-03-20 19:37:11
【问题描述】:

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

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

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

想法?

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

【问题讨论】:

  • 您有任何我们可以帮助修复的示例代码吗?我建议将您的数据放在具有overflow:hidden 的 div 中,然后在其中的 div 延伸到正确高度时动画容器 div 打开
  • 我实际上想知道是否有人可以提供一些示例代码,因为我不确定从哪里开始转换。
  • 看看 jQuery .slideUp.slideDown api.jquery.com/slideUp。这些都适用于移动设备,如果你正确地使用它们会非常流畅

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


【解决方案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);
        }

    });
});

这是demo in JSFiddle

【讨论】:

  • 嗯,如果不给 pageinit 一个页面参数,这对我不起作用。
  • 实际上,我认为问题在于我正试图让它在 pageinit 事件之后通过 ajax 注入到 dom 的可折叠组件上工作。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-24
  • 1970-01-01
  • 2011-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多