Javascript 循环生成的引导面板折叠的Jquery不工作

在Jquery的帮助下，我使用for循环创建了多个引导面板

问题是tabpanel不工作，我无法展开或折叠面板主体

TTT

JS代码：

var headingList = ["heading01", "heading02", "heading03", "heading04", "heading05", "heading06", "heading07", "heading08", "heading09", "heading10"];
var collapseList = ["collapse01", "collapse02", "collapse03", "collapse04", "collapse05", "collapse06", "collapse07", "collapse08", "collapse09", "collapse10"];
var labelList = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"];
var filterList = ["f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10"];

var i = 0,
  len = headingList.length;
for (i; i < len; i += 1) {
  console.log(headingList[i]);
  console.log(collapseList[i]);
  console.log(labelList[i]);
  console.log(filterList[i]);
  $("#accordion").append(
    '<div class="panel panel-default">' +
    '<div class="panel-heading" role="tab" id=' + headingList[i] + '>' +
    '<h4 class="panel-title">' +
    '<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>' +
    labelList[i] +
    '</a>' +
    '</h4>' +
    '</div>' +
    '<div id=' + collapseList[i] + ' class="panel-collapse collapse" role="tabpanel" aria-labelledby=' + headingList[i] + '>' +
    '<div class="panel-body">' +
    '<select multiple id=' + filterList[i] + ' size="10"></select><br>' +
    '</div>' +
    '</div>' +
    '</div>'
  )
};

var headingList=[“heading01”、“heading02”、“heading03”、“heading04”、“heading05”、“heading06”、“heading07”、“heading08”、“heading09”、“heading10”]；
var collapseList=[“collapse01”、“collapse02”、“collapse03”、“collapse04”、“collapse05”、“collapse06”、“collapse07”、“collapse08”、“collapse09”、“collapse10”]；
var labelList=[“v1”、“v2”、“v3”、“v4”、“v5”、“v6”、“v7”、“v8”、“v9”、“v10”]；
变量过滤器列表=[“f1”、“f2”、“f3”、“f4”、“f5”、“f6”、“f7”、“f8”、“f9”、“f10”]；
var i=0，
len=headingList.length；
对于（i；i”+
'' +
'' +
''
)
};

---

谢谢。

你刚刚错过了将

添加到

你刚刚错过了将
添加到
我真为错过这一点感到羞愧。投票并接受。谢谢。我错过了那件事真是太遗憾了。投票并接受。谢谢
var headingList = ["heading01", "heading02", "heading03", "heading04", "heading05", "heading06", "heading07", "heading08", "heading09", "heading10"];
var collapseList = ["collapse01", "collapse02", "collapse03", "collapse04", "collapse05", "collapse06", "collapse07", "collapse08", "collapse09", "collapse10"];
var labelList = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"];
var filterList = ["f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10"];

var i = 0,
  len = headingList.length;
for (i; i < len; i += 1) {
  console.log(headingList[i]);
  console.log(collapseList[i]);
  console.log(labelList[i]);
  console.log(filterList[i]);
  $("#accordion").append(
    '<div class="panel panel-default">' +
    '<div class="panel-heading" role="tab" id=' + headingList[i] + '>' +
    '<h4 class="panel-title">' +
    '<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>' +
    labelList[i] +
    '</a>' +
    '</h4>' +
    '</div>' +
    '<div id=' + collapseList[i] + ' class="panel-collapse collapse" role="tabpanel" aria-labelledby=' + headingList[i] + '>' +
    '<div class="panel-body">' +
    '<select multiple id=' + filterList[i] + ' size="10"></select><br>' +
    '</div>' +
    '</div>' +
    '</div>'
  )
};

<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>

<a role="button" data-toggle="collapse" data-parent="#accordion" href=#' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>