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

Posted 2023-03-24

【中文标题】在 Javascript 中填充的可折叠将不起作用

【英文标题】：Collapsible populated within Javascript won't work

【发布时间】：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";
    
  );

【参考方案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 函数在那里工作得很好，也许问题出在你没有发送的一些代码上？