create - jquery mobile accordion

JQuery-Mobile colapsa evento expand/collapse

Question

¿Alguien sabe alguna otra forma de capturar el evento de expandir o contraer un componente marcado con data-role="collapsible" aparte del evento onclick de su encabezado?

EDITAR: Me gustaría algún tipo de evento que también proporcione información sobre el estado expandido / contraído del componente.

Answer 1

En jQuery Mobile 1.4 se encuentran los eventos colapsable colapsable y colapsableexpand . https://api.jquerymobile.com/collapsible/#event-collapse

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

Answer 2

Hay eventos personalizados para los bloques collapsible . Puedes enlazar a los eventos expand y collapse :

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

Aquí hay un jsfiddle: http://jsfiddle.net/6txWy/

Answer 3

No creo que haya otra manera de hacer esto. No creo que pueda utilizar animationComplete en este caso como se describe aquí:
http://jquerymobile.com/test/docs/api/events.html

Quizás pueda utilizar ciertos cambios de clase en los elementos específicos, lo que de hecho no es mejor que vincular un evento onclick del encabezado.

Answer 4

Puedes probar el evento jQuery mobile tap. No lo he usado personalmente, pero he oído que es similar al controlador de eventos de mousedown . Si brindó un poco más de detalles acerca de por qué el onclick no funciona, quizás podamos ayudarlo un poco más.

Answer 5

Puedes vincular cualquier evento que desees, ejemplo:

• http://jsfiddle.net/9mDbh/ // Eventos
• http://jsfiddle.net/9mDbh/1/ // Eventos táctiles

Manifestación:

• 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>