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

Question

这个问题已经有答案了:

jquery mobile collapsible-set perform jquery function on collapse (1 个回答)

已关闭 6 年前。

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

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

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

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

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

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

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