Question

我是jQuery的新手，我正在使用jQuery mobile 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：

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

JavaScript的：

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

Answer 1

您是否尝试过添加data-enhanced =“true”，因此代码变为：

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

可折叠的JSON内容

1 个答案: