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

Вот рабочая ДЕМО