-1

我正在使用 jQuery mobile，我需要创建一个可折叠（手风琴）项目的列表。我的问题是主要的可折叠项目相互嵌套。我需要将组分开，如下所示：

   [ COLLAPSIBLE ONE ]
   （图片）
   名称 A链接A1 链接    A2

[可折叠的两个]
   （图片）
   名称B
   链接B1链接
   B2


   （图片）
   名称C
   链接C1链接
   C2

...


可折叠列表看起来应该是堆叠的，如他们的 API 页面

所示 这是我得到的：http : //jsfiddle.net/pggJm/1/output.json 


{
    "actions" : [
        {
            "venue": "COLLAPSIBLE ONE",
            "event": [
                {
                    "img": "imgA.jpg",
                    "name": "Name A",
                    "location": "loc A",
                    "desc": "desc A",
                    "link1": "linkA1.html",
                    "link2": "linkA2.html"
                }
            ]
        },
        {
            "venue": "COLLAPSIBLE TWO",
            "event": [
                {
                    "img": "imgB.jpg",
                    "name": "Name B",
                    "location": "loc B",
                    "desc": "desc B",
                    "link1": "linkB1.html",
                    "link2": "linkB2.html"
                },
                {
                    "img": "imgC.jpg",
                    "name": "Name C",
                    "location": "loc C",
                    "desc": "desc C",
                    "link1": "linkC1.html",
                    "link2": "linkC2.html"
                }
            ]
        }
    ]
}

main.js

$.ajax({
    url: "output.json",
    dataType: 'json',
    success: function (data) {
        var html2 = [];
        $.each(data.actions, function(i, entry) {
                html2.push('<div data-role="collapsible" data-theme="a" data-content-theme="d" data-inset="false">')
                html2.push('<h4>'+this.venue+'</h4>');      

           $.each(this.event, function() {
                html2.push('<img src="'+this.img+'" class="img_border" alt="'+this.img+'"/>');
                html2.push('<p>'+this.name+'</p>');
                html2.push('<p>'+this.location+'</p>');
                html2.push('<a href="'+this.link1+'" target="_blank" data-role="button">Lorem</a>');
                html2.push('<a class="external" href="'+this.link2+'" target="_blank" data-role="button">Ipsum</a>');
            });
        });

        $('#cat2').append( html2.join('') ).trigger( "create" );
    } // end success
});
4

1 回答 1

1

您的问题是您没有关闭每个可折叠的 div。所以第二个 div 在第一个中结束，第三个在第二个中结束。您需要将以下行添加到 $.each 循环的末尾：

html2.push('</div>');

我已经更新了小提琴以反映这一点。

于 2013-08-15T17:32:03.400 回答