在JQM中将可折叠添加到另一个可折叠（嵌套的可折叠）中

Question

我想得到这个：

但我需要动态创建HTML，因为它是通过外部资源的AJAX加载的。 我已经在这里问了这个问题（JQM: Dynamic nested collapsibles - $(collapsible).collapsible() & $(collapsible).trigger('create')），但是我对列表和可折叠文件完全错了，所以我认为一个新问题会更好。

这是我到目前为止所得到的：

function loadTipps() {
    console.log("Lade Tipps..");
    var categoriesURL = tippsURL+"?type=kategorien&callback=?"; // url for the categories
    $.getJSON(categoriesURL,function(data) {
        console.log("Lade Kategorien..");
        var DIV_tipps_komplett = $("#tipps_komplett");
        $.each(data, function(key,value){
            var kategorie_ID = value.id;
            var kategorie_NAME = value.name;

            var collapsible_HTML = $('<div data-role="collapsible"></div>');
            var kategorie_Ueberschrift_HTML = $('<h3>'+kategorie_NAME+'</h3>');
            var tipps_kategorie_HTML = $('<div id="tipps_kategorie'+kategorie_ID+'" data-role="collapsible-set"></div>');

            var tippURL = tippsURL+"?type=tipp&kat_id="+value.id+"&callback=?"; // url for the tipps of the current category
            $.getJSON(tippURL,function(data2) {
                $.each(data2, function(key2,value2){
                    var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';
                    tipps_kategorie_HTML.append(tipp_Ueberschrift_Text_HTML);
                }); //<--each
            });//<--getJSON

            collapsible_HTML.append(kategorie_Ueberschrift_HTML);
            collapsible_HTML.append(tipps_kategorie_HTML);
            DIV_tipps_komplett.append(collapsible_HTML);
        });//<--each
        DIV_tipps_komplett.trigger('create');
    });//<--getJSON
}

这导致：

如您所见，第一个可折叠集中的项目不在另一个可折叠集中。有什么想法吗？

Answer 1

尝试更改行：

var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';

到

var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><h3>'+value2.name+'</h3><p>'+value2.text+'</p><br></div>';

Collapsible需要<h3>元素而不是<b>才能呈现。

以下是删除了AJAX调用的确切代码的演示：http://jsfiddle.net/ezanker/RkLuV/

顺便说一句，这几乎就是我在这里给你的答案：collapsible list with collapsed items in jqm，在那里继续谈话可能会更好。