如何检测在jQuery Mobile中单击可折叠按钮的时间

时间:2017-02-25 13:22:27

标签: jquery jquery-mobile

我想知道是否有一些API可以检测何时在jQuery mobile中打开可折叠项目。

https://api.jquerymobile.com/collapsible/

或者我们必须使用自定义jQuery事件?

我的意思是有一种方法来检测可折叠集的扩展

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

但没有API方式来检测哪个项目已被展开......

1 个答案:

答案 0 :(得分:1)

你可以找到没有折叠的div:

$('#myc').on('collapsibleexpand', function( event, ui ) {
    $(this).find('div.ui-collapsible:not(.ui-collapsible-collapsed)')...
});

或附加事件处理程序:

$('a.ui-collapsible-heading-toggle').on('tap click', function(e) {
    ....
})

摘录:



$(document).on("pagecreate", function () {
    $('a.ui-collapsible-heading-toggle').on('tap click', function(e) {
        if ($(this).closest('div.ui-collapsible').is('.ui-collapsible-collapsed')) {
            console.log('tap click: ' + this.childNodes[0].textContent);
        }
    })

    $('#myc').on('collapsibleexpand', function( event, ui ) {
        var ele = $(this).find('div.ui-collapsible:not(.ui-collapsible-collapsed)');
        console.log('collapsibleexpand: ' + ele.find('a.ui-collapsible-heading-toggle').get(0).childNodes[0].textContent);
    });

});

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div data-role="content" id="myc">
    <div data-role="collapsible">
        <h3>I'm a header1</h3>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
    <div data-role="collapsible">
        <h3>I'm a header2</h3>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
</div>
&#13;
&#13;
&#13;