0

我正在尝试在 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');
            }
        });     
    });
4

1 回答 1

0

可折叠内容的方法是：

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

查看更多：http: //jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html

对于 Collapsible-set，您有：

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

查看更多：http: //jquerymobile.com/demos/1.2.0/docs/content/content-collapsible-set.html

我目前在一条类似的船上，但试图在可折叠集中嵌套一个可折叠列表：http: //jsfiddle.net/MqDFt/3/

查看可能产生的 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").collapsibleset("refresh") 时，它应该会正确显示。

于 2012-11-20T23:26:13.060 回答