C# 如何在折叠/折叠面板中显示文件

如何在

中显示以下数据我假设您已经包括JQuery。还有引导。如果您还没有这样做，请同时参考Jquery和Bootstrap，这样您就可以使用像Accordion这样的对象

然后创建一个空div来存储accordion对象

<div class="panel-group" id="accordion"></div>

创建一个js文件，并根据需要命名它。把这个代码放进去

$( document ).ready(function() {
    $.ajax({
        type : 'post',
        url: 'data.json',  //Here you will fetch records, give referance to your JSON file
        dataType: 'json',
        success: function(data) {
          var accordionData;
          accordionData = '';

          for(var i = 0; i < data.species.length; i++){
            accordionData += '<div class="panel panel-default">';
            accordionData += '<div class="panel-heading">';
            accordionData += '<h4 class="panel-title">';
            accordionData += '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '">';
            accordionData += data.species[i].name + '</a>';
            accordionData += '</h4>';
            accordionData += '</div>';
            accordionData += '<div id="collapse' + i + '" class="panel-collapse collapse">';
            accordionData += '<div class="panel-body">';
            accordionData += '<ul>';
            accordionData += '<li><strong>Name : </strong>' + data.species[i].name + '</li>';
            accordionData += '<li><strong>Classification : </strong>' + data.species[i].classification + '</li>';
            accordionData += '<li><strong>designation : </strong>' + data.species[i].designation + '</li>';
            accordionData += '<li><strong>average_height : </strong>' + data.species[i].average_height + '</li>';
            accordionData += '<li><strong>skin_colors : </strong>' + data.species[i].skin_colors + '</li>';
            accordionData += '<li><strong>hair_colors : </strong>' + data.species[i].hair_colors + '</li>';
            accordionData += '<li><strong>eye_colors : </strong>' + data.species[i].eye_colors + '</li>';
            accordionData += '<li><strong>average_lifespan : </strong>' + data.species[i].average_lifespan + '</li>';
            accordionData += '<li><strong>homeworld : </strong>' + data.species[i].homeworld + '</li>';
            accordionData += '<li><strong>language : </strong>' + data.species[i].language + '</li>';
            accordionData += '<li><strong>people : </strong><ul>';
            for(var j = 0; j < data.species[i].people.length; j++){
                accordionData += '<li>' + data.species[i].people[j] + '</li>';
            }
            accordionData += '</ul>';
            accordionData += '<li><strong>films : </strong><ul>';
            for(var k = 0; k < data.species[i].films.length; k++){
                accordionData += '<li>' + data.species[i].films[k] + '</li>';
            }
            accordionData += '</ul>';
            accordionData += '<li><strong>created : </strong>' + data.species[i].created + '</li>';
            accordionData += '<li><strong>edited : </strong>' + data.species[i].edited + '</li>';
            accordionData += '<li><strong>url : </strong>' + data.species[i].url + '</li>';
            accordionData += '</ul>';
            accordionData += '</div></div></div>';

          }

          veriler = data.species[0].name;
          $('#accordion').html(accordionData);


      }
  });
});

$（文档）.ready（函数（）{
$.ajax({
键入：“post”，
url:'data.json'，//您将在此处获取记录，并引用您的json文件
数据类型：“json”，
成功：功能（数据）{
var一致性数据；
手风琴数据=“”；
对于（var i=0；i'；
accordionData+='
分类：'+数据.物种[i].分类+'
'；
accordionData+='
名称：'+数据.物种[i].名称+'
'；
accordionData+='
平均高度：'+数据。物种[i]。平均高度+'
'；
accordionData+='
肤色：'+数据.物种[i].肤色+'
'；
accordionData+='
头发颜色：'+数据。物种[i]。头发颜色+'
'；
accordionData+='
眼睛颜色：'+数据。物种[i]。眼睛颜色+'
'；
accordionData+='
平均寿命：'+数据。物种[i]。平均寿命+'
'；
accordionData+='
家庭世界：'+数据.物种[i].家庭世界+'
'；
手风琴数据+='
语言：'+data.species[i].语言+'
；
手风琴数据+='
人：
；
对于（var j=0；j'；
}
accordionData+='
'；
accordionData+='
电影：
'；
对于（var k=0；k'；
}
accordionData+='
'；
accordionData+='
已创建：'+data.species[i]。已创建+'
'；
accordionData+='
编辑：'+数据.物种[i].编辑+'
'；
accordionData+='
url:'+data.species[i].url+'
'；
accordionData+=''；
手风琴数据+=''；
}
veriler=数据。物种[0]。名称；
$（'#accordion'）.html（accordionData）；
}
});
});

别忘了引用您创建的这个新JS文件

<script type="text/javascript" src="yourNewFile.js"></script>

顺便说一句，我知道有一种更优雅的方法可以做到这一点，但这确实奏效了。我做了测试，效果很好

注意：JSON文件中缺少花括号。把{放在开头，把}放在结尾。 艾德·艾特 在32-39之间更改行

for（var j=0；j

编辑编号：2

换行

accordionData += '<li><strong>homeworld : </strong>' + data.species[i].homeworld + '</li>';

accordionData += '<li><strong>url : </strong>' + data.species[i].url + '</li>';

accordionData+='
家庭世界：'+data.species[i].家庭世界+'
；

到

accordionData+='
家庭世界：
；

这条线呢

accordionData += '<li><strong>homeworld : </strong>' + data.species[i].homeworld + '</li>';

accordionData += '<li><strong>url : </strong>' + data.species[i].url + '</li>';

accordionData+='
url:'+data.species[i].url+'
；

到

accordionData+='
url:
'；

您对问题的描述不具有建设性。请基于此Ruzer编辑您的问题，谢谢它100%有效，但是当js数据保存在内部时它有效，当保存在外部文件时它不起作用。我也正确地检查了文件名和链接，但当js保存在新文件时它不起作用，但这对我内部来说是可行的，这要感谢很多如何让链接在电影中起作用，就像我编辑了我之前的文章一样，请看上面。只需更改if语句和voila语句之间的行。不适用于homeworld和url

accordionData += '<li><strong>url : </strong><a href="' + data.species[i].url + '">' + data.species[i].url + '</a></li>';