Javascript JQuery成功显示了来自JSON的数据，但可以'；不要让可折叠样式发挥作用_Javascript_Jquery_Css_Json

Javascript JQuery成功显示了来自JSON的数据，但可以'；不要让可折叠样式发挥作用

javascript jquery css json

Javascript JQuery成功显示了来自JSON的数据，但可以'；不要让可折叠样式发挥作用,javascript,jquery,css,json,Javascript,Jquery,Css,Json,我的目标是编写一个页面，该页面从外部文件中提取数据，并以可折叠的div显示数据。我已经成功地使用了以下三个文件，但无法将每个数据项显示在可折叠的DIV中可折叠div的代码确实有效，但仅在隔离状态下有效，即当我尝试将此样式应用于从JSON文件提取的数据时无效： <div data-role="collapsible" data-theme="a" data-content-theme="a"> 可折叠的代码/样式在哪里？对不起，我编辑了我的原始问题，因此它显示了可折叠的代码，但没有

我的目标是编写一个页面，该页面从外部文件中提取数据，并以可折叠的div显示数据。我已经成功地使用了以下三个文件，但无法将每个数据项显示在可折叠的DIV中

可折叠div的代码确实有效，但仅在隔离状态下有效，即当我尝试将此样式应用于从JSON文件提取的数据时无效：

<div data-role="collapsible" data-theme="a" data-content-theme="a">

可折叠的代码/样式在哪里？对不起，我编辑了我的原始问题，因此它显示了可折叠的代码，但没有显示我发布问题的确定时间。我已经尝试在index.html文件和/或script.js文件中的所有位置使用，包括嵌套div，但它不起作用，JSON数据只是以纯文本显示。例如，将

更改为，确实有效，向DIV添加一些CSS也是有效的-但是可折叠代码不起作用，这是我尝试实现的关键。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <title>Load Content from JSON File using jQuery AJAX - Example</title>
    </head>
    <body>
        <h1>Load Content from JSON File using jQuery AJAX - Example</h1>
        <div id='update'>This is a div. This will be updated with Contents from JSON file by jQuery AJAX.</div>
    </body>
</html>

$(document).ready(function () { // load json file using jquery ajax
    $.getJSON('data.json', function (data) {
        var output = '<ul>';
        $.each(data, function (key, val) {
            output += '<li>' + val.name + '</li>';
        });
        output += '</ul>';
        $('#update').html(output);  // replace all existing content
    });
});

[
    {
        "name"      : "George",
        "gender"    : "male",
        "color"     : "white-mustard",
        "age"       : "5 years"
    },
    {
        "name"      : "Pety",
        "gender"    : "female",
        "color"     : "white-black-mustard",
        "age"       : "3 years"
    },
    {
        "name"      : "Alex",
        "gender"    : "male",
        "color"     : "white-grey-black",
        "age"       : "3 years"
    },
    {
        "name"      : "Rex",
        "gender"    : "male",
        "color"     : "white-mustard",
        "age"       : "2 years"
    }
]