如果单击其父Accordion，如何折叠所有嵌套的Accordions？

Question

这是我的jsfiddle

http://jsfiddle.net/DBYLk/18/

单击Parent后，展开其下的嵌套Accordions。

最后，如果再次单击Parent，如何关闭当前的所有嵌套Accordions？

这是我创建Accordions的方式：

$("div.accordian").accordion({
    heightStyle: "content",
    autoHeight: false,
    collapsible: true,
    clearStyle: true,
    active: false,
});

$("div.accordian").accordion({
    activate: function (event, ui) {
        createAccordian(event, ui);
    }
});

function createAccordian(activateEvent, activateUi) {
    var selectedeleemnt = activateUi.newHeader.text();
    if (selectedeleemnt != null && activateUi.newPanel.html() == '') {
        //do stuff to laod html here and then replace html below
        activateUi.newPanel.html(" \
                    <h3><a href='#'>Child1</a></h3> \
                    <div></div> \
                    <h3><a href='#'>Child2</a></h3> \
                    <div></div> \
                    <h3><a href='#'>Child3</a></h3><div>This doesn't have dynamic loaded accordion, just content</div>")
            .accordion({
            heightStyle: "content",
            autoHeight: false,
            collapsible: true,
            active: false,
            activate: function (event, ui) {
                createAccordian(event, ui);
            }                
        });
    }
}

Answer 1

单击父母时，只需在手风琴的子标题上触发click事件。

演示：http://jsfiddle.net/lotusgodkk/DBYLk/21/

$(document).on('click', '.ui-accordion-header', function () {
    $(this).next('.ui-accordion-content:first').find('.ui-accordion-header-active').trigger('click');
});