Jquery mobile 在Jquery Mobile中动态加载可折叠集

我试图在JQuery Mobile中使用ajax调用动态加载嵌套的可折叠集。出于某种原因，可折叠div最终显示在同一标高上；没有层次或嵌套的

代码如下：

    $('#pp-home').live("pageinit", function(){
        //Get Colleges
        $.ajax({url: "parent.php?action=xyz", 
            success:function(data){
                $(data).find('college').each(function(){
                    $('#colleges_div').append(
                        "<div id='col_"+$(this).attr('id')+"' data-role='collapsible' data-theme='c'>"+
                            "<h3>"+$(this).text()+"</h3><p>ssss</p>"+
                        "</div>"
                    );
                    //Get data
                    $.ajax({url:"children.php?action=xyz", 
                        success:function(data){
                            $(data).find('dept').each(function(){
                                $("#col_"+$(this).attr('cid')).append(
                                    "<div data-role='collapsible' data-theme='a' data-mini='true'>"+
                                        "<h3>"+$(this).text()+"</h3><p>ssss</p>"+
                                    "<div>"
                                );
                            $("#col_"+$(this).attr('cid')).trigger('create');
                            }); 
                        }
                    });
                });
                $('#colleges_div').trigger('create');
            }
        });     
    }); 

---

可折叠内容的方法有：

$( ".selector" ).trigger( "collapse" ); 
$( ".selector" ).trigger( "expand" );

请参阅更多：

对于可折叠集，您有：

$( ".selector" ).collapsibleset( "refresh" );

请参阅更多：

我目前也在一条类似的船上，但我试图在一个可折叠集合中嵌套一个可折叠列表：

看看HTML的结果，我认为您缺少了一个定义为可折叠集的父级。格式应为：

<div data-role="collapsible-set" id="parent1">
  <div data-role="collapsible" id="child1">
    <h3>Header Title 1</h3>
    <p>ssss</p>
  </div>
  <div data-role="collapsible" id="child2">
    <h3>Header Title 2</h3>
    <p>ssss</p>
  </div>
</div>

然后，当调用$parent1.collapsablesetrefresh时，它应该正确显示