jquery-mobile - jquerymobile 1.4.2 - 可折叠动画

Question

我想在 jquery mobile 1.4.2 中为可折叠集制作动画。不幸的是，我什么也没找到。所有动画脚本都使用 1.3.2 或 1.4.0 版本。

我还是个新手，不知道我是否可以切换到 1.4.0 或 1.3.2 来保持我的设计？

我能做些什么？

Answer 1

这是一种方法：

使用带有 的包装器 div 而不是class="ui-collapsible-set"可折叠集，这将为您提供可折叠集样式，但随后允许您实现逻辑：

<div class="ui-collapsible-set">
    <div data-role="collapsible" class="animateMe">
        <h3>Section 1</h3>
    <p>I'm the collapsible content for section 1</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 2</h3>
    <p>I'm the collapsible content for section 2</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 3</h3>
    <p>I'm the collapsible content for section 3</p>
    </div>
</div>

为了方便添加处理程序，我为每个可折叠对象添加了一个 animateMe 类：

$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) { 
    var current = $(this).closest(".ui-collapsible");             
    if (current.hasClass("ui-collapsible-collapsed")) {
        //collapse all others and then expand this one
        $(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
        $(".ui-collapsible-content", current).slideDown(300);
    } else {
        $(".ui-collapsible-content", current).slideUp(300);
    }
});

此代码是每个可折叠标题上的单击处理程序。它检查单击的可折叠项当前是否展开或折叠。如果它被展开，我们只需用 slideUp 动画折叠它。如果它被折叠，我们首先折叠任何展开的项目，然后用 slideDown 动画展开这个。

如果要允许同时展开多个项目，只需删除此行：

$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();

这是一个有效的演示