Question

我想在jquery mobile 1.4.2中为可折叠集设置动画。不幸的是我没有找到任何东西。所有动画脚本都使用版本1.3.2或1.4.0。

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

我该怎么办？

Answer 1

这是一种方法：

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

<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();

这是一个有效的 DEMO

jquerymobile 1.4.2 - Animate可折叠

1 个答案: