如何檢測jQuery Mobile中的可摺疊按鈕何時被點擊

Question

我想知道在jQuery移動中打開可摺疊項目時是否有一些API需要檢測。

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>