jQuery モバイルを使用しており、折りたたみ可能な (アコーディオン) アイテムのリストを作成する必要があります。私の問題は、主な折りたたみ可能なアイテムが互いにネストされていることです。次のように、グループを分離する必要があります。
【コラプシブルワン】
（イメージ）
名前 A
linkA1
linkA2
[ COLLAPSIBLE TWO ]
(イメージ)
Name B
linkB1
linkB2
(image)
Name C
linkC1
linkC2
...
折りたたみ可能なリストは、API ページに示されているように、
積み上げられているように見えるはず
です。
{
"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
});