Question

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

[COLLAPSIBLE ONE]
（图像）
名称A
linkA1
linkA2

[COLLAPSIBLE TWO]
（图像）
姓名B
linkB1
linkB2

（图像）
名称C
linkC1
linkC2

...

可折叠列表看起来应该是堆叠的，如their API page所示

这是我得到的：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
});

Answer 1

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

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

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

jQuery Mobile输出问题

1 个答案: