jquery - JQ Mobile Collapsible - 想在可折叠展开时做点什么……不知道如何启动它

Question

我有几个页面上有多个可折叠项。当一个扩展时，我想关闭所有其他的。我已经读到我需要使用 .trigger('expand') 和 .trigger('collapse') 来动态打开和关闭...但是当实际打开可折叠时如何触发事件？

我认为可能是点击事件...... $('#myExpandable').click()- 不行。我试图绑定.bind('expand', function() {} ); - 不行......我试过.live('expand', function() {} );..一切都无济于事。

有人可以在这里提示我吗？

谢谢！

Answer 1

您可以绑定到元素的expand事件，然后collapse在其余可折叠项上触发事件：

//since we don't know when the page will be injected into the DOM,
//we can bind to it's elements once it's been added to the DOM and is about to be initialized
$(document).delegate('#my-page-id', 'pageinit', function () {

    //cache each of the collapsible elements in a variable
    var $collapse = $(this).find('[data-role="collapsible"]');

    //bind to each collapsible's `expand` event
    $collapse.bind('expand', function () {

        //when a collapsible is expanded, collapse all the others on this page
        $collapse.not(this).trigger('collapse');

    });
});​

这是一个演示：http: //jsfiddle.net/FhZVn/