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

折りたたみ可能なセットの場合、次のものがあります。

$( ".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 に答える