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/ //触摸事件

演示：

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

我认为还有另一种方法可以做到这一点。我不相信你可以在这种情况下使用animationComplete，如下所述：
http://jquerymobile.com/test/docs/api/events.html

也许你可以对特定元素使用某些类更改，这实际上并不比绑定标题的onclick事件更好。

Answer 5

您可以尝试jQuery mobile点击事件。我没有亲自使用它，但我听说它类似于mousedown事件处理程序。如果你提供一些关于为什么onclick无效的详细信息，我们可以帮助你多一点。

JQuery-Mobile可折叠扩展/折叠事件

5 个答案: