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

ここに動作するデモがあります