javascript - Jquery for 循环生成的引导面板折叠不起作用

Question

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

问题是选项卡面板无法工作，我无法展开或折叠面板主体。

JSFiddle

<div class="container-fluid text-center" name="drawing">
  <h2><b> TTT </b></h2>
  <hr>

  <div class="row">

    <div class="container-fluid text-center col-sm-2" name="filters">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      </div>
    </div>

    <div class="container-fluid text-center col-sm-10" name="chart">
      <span id="chart1"></span>
    </div>
  </div>
  <hr>
</div>

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>'
  )
};

谢谢。

Answer 1

您刚刚错过了添加 #至<a>标签href属性

所以替换

<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] + '>

在你的js代码中

Working jsfiddle