JQuery-Mobile складное событие разворачивания / свертывания

Question

Кто-нибудь знает какой-либо другой способ захвата события расширения или свертывания компонента, отмеченного data-role="collapsible", кроме события onclick его заголовка?

РЕДАКТИРОВАТЬ: Я хотел бы какое-то событие, которое также предоставит информацию о развернутом / свернутом состоянии компонента.

Answer 1

Для блоков collapsible существуют пользовательские события. Вы можете привязаться к событиям expand и collapse:

$('#my-collapsible').bind('expand', function () {
    alert('Expanded');
}).bind('collapse', function () {
    alert('Collapsed');
});

Вот jsfiddle: http://jsfiddle.net/6txWy/

Answer 2

В jQuery Mobile 1.4 есть события collapsiblecollapse и collapsibleexpand .https://api.jquerymobile.com/collapsible/#event-collapse

$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );

Answer 3

Вы можете связать любое событие, которое хотите, например:

• http://jsfiddle.net/9mDbh/ // События
• http://jsfiddle.net/9mDbh/1/ // Touch Events

Демонстрация:

• http://jsfiddle.net/9mDbh/5/

JS

$("div:jqmData(role='collapsible')").each(function(){
    bindEventTouch($(this)); 
});

function bindEventTouch(element) {
    element.bind('tap', function(event, ui) {
       if(element.hasClass('ui-collapsible-collapsed')) {
            alert(element.attr('id')+' is closed');
        } else {
            alert(element.attr('id')+' is open');
        }
    });
}

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible" id="number1">
           <h3>Header #1</h3>
           <p>I'm Header #1</p>
        </div>
        <br />
        <div data-role="collapsible" data-collapsed="false" id="number2">
           <h3>Header #2</h3>
           <p>I'm Header #2</p>
        </div>
    </div>
</div>

Answer 4

Вы можете попробовать событие jQuery mobile . Лично я не использовал его, но слышал, что он похож на обработчик событий mousedown. Если вы чуть подробнее рассказали о том, почему онклик не работает, возможно, мы могли бы помочь вам немного подробнее.

Answer 5

Я не думаю, что есть другой способ сделать это. Я не верю, что вы можете использовать animationComplete в этом случае, как описано здесь:
http://jquerymobile.com/test/docs/api/events.html

Может быть, вы можете использовать определенные изменения класса для определенных элементов, что на самом деле не лучше, чем привязка события onclick заголовка.