JQuery-Mobile 可折叠展开/折叠事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8399882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery-Mobile collapsible expand/collapse event
提问by Pablo
Does anyone know any other way to capture the event of expanding or collapsing a component marked with data-role="collapsible"apart from the onclickevent of its header?
data-role="collapsible"除了onclick标头事件之外，有没有人知道任何其他方法来捕获扩展或折叠标记的组件的事件？
EDIT: I would like some kind of event that will also provide information about the expanded/collapsed state of the component.
编辑：我想要某种事件，它也将提供有关组件展开/折叠状态的信息。
回答by Jasper
There are custom events for the collapsibleblocks. You can bind to the expandand collapseevents:
collapsible块有自定义事件。您可以绑定到expand和collapse事件：
$('#my-collapsible').bind('expand', function () {
alert('Expanded');
}).bind('collapse', function () {
alert('Collapsed');
});
Here is a jsfiddle: http://jsfiddle.net/6txWy/
这是一个 jsfiddle：http: //jsfiddle.net/6txWy/
回答by Robin Manoli
In jQuery Mobile 1.4 there are the collapsiblecollapseand collapsibleexpandevents. https://api.jquerymobile.com/collapsible/#event-collapse
在 jQuery Mobile 1.4 中有collapsiblecollapse和collapsibleexpand事件。https://api.jquerymobile.com/collapsible/#event-collapse
$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );
回答by Phill Pafford
You can bind any event you want, example:
您可以绑定任何您想要的事件，例如：
- http://jsfiddle.net/9mDbh/// Events
- http://jsfiddle.net/9mDbh/1/// Touch Events
Demo:
演示：
JS
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
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>
回答by Smamatti
I don't think there is another way to do this. I do not believe that you can utilize animationCompletein this case as described here:
http://jquerymobile.com/test/docs/api/events.html
我认为没有其他方法可以做到这一点。我不相信你可以animationComplete在这种情况下使用这里描述的：http:
//jquerymobile.com/test/docs/api/events.html
Maybe you can utilize certain class changes on the specific elements, which in fact isn't better than binding an onclick event of the header.
也许您可以在特定元素上使用某些类更改，这实际上并不比绑定标题的 onclick 事件好。
回答by john
You could try the jQuery mobiletap event. I haven't used it personally, but I hear it's similar to the mousedownevent handler. If you gave a little more detail about why the onclick isn't working maybe we could help you out a little more.
您可以尝试jQuery 移动点击事件。我个人没有使用过它，但我听说它类似于mousedown事件处理程序。如果您详细说明为什么 onclick 不起作用，也许我们可以为您提供更多帮助。
