jquerymobile 1.4.2 - Animate可折叠

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

这是一个有效的DEMO