Question

我有一个PHP脚本的ajax调用，该脚本返回我要加载到Boostrap手风琴中的数据。

手风琴单击时成功打开了每张卡，但是我无法将其关闭。

以这种方式动态创建手风琴时是否存在任何已知问题，或者我的代码有问题吗？

这是ajax调用...

    $.ajax({
      url: 'php/getservices.php',
      dataType: 'json',
      method: 'GET',
      success: function(data) {
        $('#existing-services-list').empty();
        $('#existing-services-list').append('<div class="accordion" id="accordionExample">');
        var data = data;
        for(i=0; i<data.length; i++) {
              var serviceid = data[i].SERVICEID;
              var servicename = data[i].SERVICENAME;
              var serviceurl = data[i].SERVICEURL;
              $('#existing-services-list').append('<div class="card"><div class="card-header" id="heading' + serviceid + '"><h5 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse' + serviceid + '" aria-expanded="true" aria-controls="collapse' + serviceid + '">' + servicename + '</button></h5></div><div id="collapse' + serviceid + '" class="collapse" aria-labelledby="heading' + serviceid + '" data-parent="#accordionExample"><div class="card-body">' + serviceurl + '</div></div></div>');
        }
        $('#existing-services-list').append('</div>');
      }
    });

Answer 1

我会这样https://jsfiddle.net/5r2t7a8b/

手风琴div在DOM中已经可用，并且每个项目都已添加到手风琴中。

HTML：

<div id="existing-services-list">
<div class="accordion" id="accordionExample">
</div>
</div>

jQuery：

$.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts',
      dataType: 'json',
      method: 'GET',
      success: function(data) {
      console.log(data);
        $('#accordionExample').empty();
        for(i=0; i<data.length; i++) {
              var serviceid = data[i].id;
              var servicename = data[i].title;
              var serviceurl = data[i].body;
              $('#accordionExample').append('<div class="card"><div class="card-header" id="heading' + serviceid + '"><h5 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse' + serviceid + '" aria-controls="collapse' + serviceid + '">' + servicename + '</button></h5></div><div id="collapse' + serviceid + '" class="collapse" aria-labelledby="heading' + serviceid + '" data-parent="#accordionExample"><div class="card-body">' + serviceurl + '</div></div></div>');
              }
      }
    });

Answer 2

似乎aria-controls属性和aria-labelledby不匹配。

在两者中保持相同的名称和ID。

请像这样进行更改，然后告诉我，是否有效？

Bootstrap手风琴动态创建不会崩溃

2 个答案: