0

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

这是我到目前为止所拥有的：

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');
        });
    });

}

但这并没有按预期工作。我得到正确的折叠项目的“第一个”列表。但是，如果我展开其中一个，我不会得到另一个包含折叠项目的列表。它们的行为就像一个普通的列表项：/

有任何想法吗？

4

1 回答 1

0

该行：

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);

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

于 2013-11-12T19:28:44.343 回答