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>