JQuery-Mobile可折叠的slideDown效果

Question

我想在添加slideDown或slideUp影响到div有data-role='collapsible',所以它不是一次,而是在逐步打开.

我试过这个:

$('#my-collapsible').live('expand', function() {      
    $('#my-collapsible .ui-collapsible-content').slideDown(2000);
});    
$('#my-collapsible').live('collapse', function() {
    $('#my-collapsible .ui-collapsible-content').slideUp(2000);
});

但它仍然可以毫不拖延地打开和关闭.

任何人都知道我应该如何调用这些slideDown和slideUp方法？

Answer 1

实例:

• http://jsfiddle.net/6txWy/6/
• http://jsfiddle.net/6txWy/7/

JS

$('#my-collaspible').bind('expand', function () {
    $(this).children().slideDown(2000);
}).bind('collapse', function () {
    $(this).children().next().slideUp(2000);
});

HTML

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible" id="my-collaspible">
            <h3>My Title</h3>
            <p>My Body</p>
        </div>
    </div>
</div>