JQuery-Mobile可折叠slideDown效果

Question

我想使用 data-role='collapsible' 将 slideDown 或 slideUp 效果添加到 div 中>，所以它不会立即打开，而是逐渐打开。

我已经尝试过这个:

$('#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>