0

我想得到这个：

嵌套可折叠

但我需要动态创建 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
}

这导致：

没有嵌套

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

4

1 回答 1

0

尝试换行：

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，在那里继续对话可能会更好。

于 2013-11-13T14:11:00.733 回答