Jquery для цикла, сгенерированного коллапсом панели начальной загрузки, не работает

Я создал несколько панелей начальной загрузки, используя цикл for с помощью Jquery.

Проблема в том, что вкладка не работает, я не могу развернуть или свернуть тело панели.

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

Спасибо.


person shawnngtq    schedule 23.09.2016    source источник


Ответы (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-коде

Jsfiddle работает

person Aya Salama    schedule 23.09.2016
comment
Позор мне, что я пропустил это. Проголосуйте и примите. Спасибо. - person shawnngtq; 24.09.2016