jQuery的for循環產生引導面板崩潰不能正常工作

Question

我使用的jQuery的幫助環路創建了多個自舉板。

的問題是，一個tabpanel不工作，我無法擴大，也不折疊面板主體。

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屬性

因此，在你的js代碼

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

Working jsfiddle