Question

我想使用 jQuery Mobile 向可折叠集添加动画。让我举一个简单的例子：

<div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>

jQuery Mobile 完美地处理了这个并向我展示了可折叠的3个项目。我想要的是动画，但我似乎没有在文档中找到任何内容。

我还没有测试过如何简单的 CSS动画（动画高度属性）会起作用，但是有一种 jQuery Mobile 方式可以像转动一些内部标志一样？

修改我测试了一个简单的jQuery animate方法，它确实有效。以防万一其他人需要这个。即使在我的528MHz Android手机上，它也能在默认浏览器上顺畅运行。我添加的片段非常简单：

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});

Answer 1

这里你去：

$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});

我喜欢你想要的想法，所以我玩了一下。这与jQuery Mobile控制可折叠小部件的方式挂钩，因此它与绑定到heading元素相比不那么hacky。

return false;停止默认行为，另一行使用jQuery slideUp / slideDown动画切换视图中的内容。您也可以使用.fadeToggle()或滚动自己的动画。如果您选中event.type，则可以根据触发的事件设置动画。

以下是演示：http://jsfiddle.net/VtVFB/

Answer 2

请注意，在jQuery Mobile 1.4及更高版本中，您需要绑定到collapsibleexpand和collapsiblecollapse个事件，而不是expand和collapse。所以完整的代码变成了

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});

Answer 3

代码并不完全正确。它会覆盖展开折叠事件的默认jquery移动实现，但不处理展开折叠图标的更改。

更好的代码是：

$('[data-role="collapsible"] h3:first').bind('click', function (event) {
   $(this).next('p').slideToggle(500);
   return false;
});

Answer 4

接受的答案并不能解释因为返回false而没有更改可折叠游标，所以这是我的答案：

在我的项目中，相对于[date-role="collapsible"]的内容是$(this).find('>*:not(h3)')

/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if (!$(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
}).on('collapse', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if ($(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
});

jQuery mobile将动画添加到collapsible-set

4 个答案: