Question

我想动态创建包含折叠项目的列表。如果您展开项目，则会获得几个可以展开的折叠项目。

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

function loadTipps() {
    var categoriesURL = tippsURL+"?type=kategorien&callback=?"; // url for the categories
    $.getJSON(categoriesURL,function(data) {
        var collapsibleSet = $("#tippsDIV"); //div for the list of tipps
        $.each(data, function(key,value){

            //
            var tippListID = "tippslist"+value.id; // name for the current list
            var tippListIDdiv = "tippslistdiv"+value.id; // name for the current collapsible div

            //
            var collapsible = $('<div id="'+tippListIDdiv+'" data-role="collapsible"></div>');
            collapsible.append('<h2>'+value.name+'</h2>');

            var list = $('<ul id="'+tippListID+'" data-role="listview" data-filter-theme="c" data-divider-theme="d"></ul>');

            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 collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');
                    var list2 = $('<li>'+value2.name+'</li>');
                    list2.append(collapsible2);

                    list.append(list2);
                    list.listview("refresh");
                });
            });

            collapsible.append(list);
            collapsibleSet.append(collapsible);
            collapsibleSet.trigger('create');
        });
    });

}

但这并不像预期的那样有效。我用折叠的项目得到了“第一”列表。但是，如果我扩展其中一个，我不会得到另一个包含折叠项目的列表。它们的行为就像一个普通的列表项：/

有什么想法吗？

Answer 1

该行：

var collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');

有关未正确设置ID的问题。

您可以移除list.listview("refresh");行，因为最终collapsibleSet.trigger('create');负责此事。

对于collapsible2，我认为你需要追加H2元素：

var collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');
collapsible2.append('<h2>'+value2.name+'</h2>');
var list2 = $('<li></li>');
list2.append(collapsible2);

您似乎没有将任何列表项放入内部可折叠...

jqm中折叠项目的可折叠列表

1 个答案: