Javascript 可折叠JSON内容

我对jQuery非常陌生，我正在使用jQueryMobile 1.4.3制作一个应用程序，它有一个可折叠的图标来显示JSON数据

JSON数据：

{
    "ingredients": {
        "sugar": 10,
        "salt": 10,
        "pepper": 10,
        "milk": 10,
        "banana": 10,
        "bacon": 10,
        "olive oil": 10,
        "pork": 10,
        "creams": 10
    }
}

问题是，我无法从JavaScript动态生成可折叠文件

以下是我的尝试：

HTML:

JavaScript:

var map = response.ingredients;
$.each(map, function(key, value) {
  console.log(key + ': ' + value);
  $('#listIngredients').append('<li>Title:' + key + value + '</li>');
});

var-map=response.components；
$。每个（映射、函数（键、值）{
console.log（键+'：'+值）；
$（“#ListComponents”）.append（“
标题：”+key+value+“
”）；
});

您是否尝试添加数据enhanced=“true”以使代码变为：

<div data-role="collapsible" data-enhanced="true">
    <ul data-role="listview"  id="listIngredients" data-theme="b">
    </ul>
</div>

您需要

.listview（“刷新”）

并且您忘记了可折叠

标题的标题。
<div data-role="collapsible" data-enhanced="true">
    <ul data-role="listview"  id="listIngredients" data-theme="b">
    </ul>
</div>