我在页面上创建一个Accordion元素。在负载时手风琴正常工作。我有一个按钮，可以添加一个组并重建手风琴。一旦重建，一切正常，除了最后一组。它不会扩大。除了没有打开之外没有任何错误或奇怪的行为。如果我刷新整个页面，添加的组仍然存在，但手风琴正常工作。我在刷新之前和刷新之后检查了代码。 HTML是相同的，除了最后一个元素中的类，它通常只是＆＃39; class＆＃39;，但现在它是＆＃39; class =＆＃34;＆＃34;＆＃39;。由于这是由BootStrap本身控制的，我似乎无法找到导致错误的原因。有什么想法吗？
从javascript生成的HTML：
<div id="static_group_list">
<div class="panel-group" id="groupAG">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#groupAG" href="#collapse_group1" class="collapsed" aria-expanded="false">First Test Group</a>
</h4>
</div>
<div id="collapse_group1" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th>Staff Member</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#groupAG" href="#collapse_group2" class="collapsed" aria-expanded="false">Second Test Group</a>
</h4>
</div>
<div id="collapse_group2" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th>Staff Member</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#groupAG" href="#collapse_group3" class="collapsed" aria-expanded="false">Third Test Group</a>
</h4>
</div>
<div id="collapse_group3" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th>Staff Member</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#groupAG" href="#collapse_group4" class="" aria-expanded="true">Fourth Test Group</a>
</h4>
</div>
<div id="collapse_group4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th>Staff Member</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
用于生成Accordion元素的Javascript摘录：
function create_group_response(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var xmlDoc=xmlHttp.responseXML;
var msg = '';
if ('success' == xmlDoc.getElementsByTagName("result")[0].childNodes[0].nodeValue){
var group = xmlDoc.getElementsByTagName("group");
var group_num = xmlDoc.getElementsByTagName("group_num");
var staff_groups = xmlDoc.getElementsByTagName("staff_groups");
var staff_groups_active = xmlDoc.getElementsByTagName("staff_groups_active");
var staff_group_ident = xmlDoc.getElementsByTagName("staff_group_ident");
msg += '<div class="panel-group" id="groupAG">';
for (n=0;n<group_num.length;n++){
var group_n = group_num[n].childNodes[0].nodeValue;
var group_g = staff_groups[n].childNodes[0].nodeValue;
var group_a = staff_groups_active[n].childNodes[0].nodeValue;
var group_i = staff_group_ident[n].childNodes[0].nodeValue;
if (1 == group_a && 1 == group_i){
var staff_group_staffname = xmlDoc.getElementsByTagName("staff_group_staffname" + group_n);
msg += '<div class="panel panel-default">';
msg += '<div class="panel-heading" role="tab">'; // role="tab" not part of original code, added as attempt to solve issue from research.
msg += '<h4 class="panel-title">';
msg += '<a data-toggle="collapse" data-parent="#groupAG" href="#collapse_group' + group_n + '">';
msg += group_g;
msg += '</a>';
msg += '</h4>';
msg += '</div>';
msg += '<div id="collapse_group' + group_n + '" class="panel-collapse collapse" role="tabpanel">'; // role="tabpanel" not part of original code, added as an attempt to solve issue.
msg += '<div class="panel-body">';
msg += '<table class="table table-condensed">';
msg += '<tr>';
msg += '<th>Staff Member</th>';
msg += '</tr>';
for (s=0;s<staff_group_staffname.length;s++){
var s_g_s = staff_group_staffname[s].childNodes[0].nodeValue;
msg += '<tr>';
msg += '<td>' + s_g_s + '</td>';
msg += '</tr>';
}
msg += '</table>';
msg += '</div>';
msg += '</div>';
msg += '</div>';
}
}
msg += '</div>';
document.getElementById("static_group_list").innerHTML = msg;
document.getElementById("createResponse").innerHTML = 'Group Created Successfully!';
document.getElementById("groupAG").reload; //part of a previous attempt to solve issue.
} else {
msg = xmlDoc.getElementsByTagName("result")[0].childNodes[0].nodeValue;
document.getElementById('createResponse').innerHTML = msg;
}
}
}
}