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

【问题标题】：Collapsible populated within Javascript won't work在 Javascript 中填充的可折叠将不起作用
【发布时间】：2021-07-23 12:00:45
【问题描述】：

我正在尝试创建一个在 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 html css accordion collapsable

【解决方案1】：

如果您将其添加到您的 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

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

【讨论】：

感谢您的回复！由于数据是安全的，我不得不省略一些代码。但是代码中的所有内容都可以使用，而不是可折叠功能。所以我可以在浏览器中看到数据，但它不会展开/折叠。
你看过我链接的 jsfiddle 了吗，collapse 函数在那里工作得很好，也许问题出在你没有发送的一些代码上？