5

我想使用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 动画方法，它确实有效。以防万一其他人需要这个。即使在我的 528MHz Android 手机的默认浏览器上，它也能流畅运行。我添加的一个片段非常简单：

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

4 回答 4

6

给你：

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

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

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

这是一个演示：http: //jsfiddle.net/VtVFB/

于 2012-05-03T23:52:32.457 回答
2

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

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});
于 2014-08-29T07:31:58.463 回答
0

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

更好的代码将是：

$('[data-role="collapsible"] h3:first').bind('click', function (event) {
   $(this).next('p').slideToggle(500);
   return false;
});​
于 2013-05-28T05:06:49.633 回答
0

接受的答案没有说明它不会因为返回错误而改变可折叠光标，所以这是我的答案：

在我的项目中，它是相对于的[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();
        }
    });
});
于 2015-08-25T21:22:21.057 回答