在 Javascript 中填充的可折叠将不起作用

如何解决在 Javascript 中填充的可折叠将不起作用

我正在尝试创建一个填充在 Javascript 中并写入 HTML 的可折叠对象，但由于某种原因，结果不会像应有的那样展开/折叠。大多数代码都可以在 W3Schools 上找到，并根据我的目的进行了编辑。

HTML：

<div id="results">
    </div>

CSS：

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

JAVASCRIPT：

// for each JSON object in the results array
  for (index = 0; index < results.length; index++) {
    // add on to html with each NICE Role Title
    html += `<button class="collapsible">${results[index].NICE_Role_Title.value}</button>
<div class="content">
  <p>${results[index].NICE_Role_Description.value}</p>
</div>`
  }

  // send html to the front end (id = test_results)
  document.getElementById('results').innerHTML = html;

//Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click",function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

解决方法

如果您将此添加到您的 javascript 的顶部，它将起作用，

let html = '';
let results = [{NICE_Role_Title: {value: 'test1'},NICE_Role_Description: {value: 'desc1'}},{NICE_Role_Title: {value: 'test2'},NICE_Role_Description: {value: 'desc2'}}];

jsfiddle

您的示例缺少一些数据来填充可折叠。