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

}

しかし、これは期待どおりには機能しません。折りたたまれたアイテムで「最初の」リストを正しく取得します。しかし、それらの 1 つを展開すると、アイテムが折りたたまれた別のリストが表示されません。それらは通常のリスト項目のように振る舞います:/

何か案は？

4

1 に答える 1

0

この線：

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

ID が正しく設定されていないという問題があります。

list.listview("refresh");finalがこれを処理するので、行を削除できます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 に答える