Question

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

Answer 1

可折叠内容的方法是：

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

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

对于可折叠集，您有：

$( ".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（“刷新”）时，它应该正确显示。

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

1 个答案: