javascript - 如何在承诺基础列表上使用可折叠？

Question

我有这个从外部文件excel调用的列表，基本上它返回的是这样的：

[
    {Cat: 4000,Code: "NSM0001",Department: "Natural Science and Mathematics",Roles: "Teacher 1"},
    {Cat: 4000,Code: "NSM0002",Department: "Natural Science and Mathematics",EmpNo: 107017,Fullname: "Krishna Patayan",Roles: "Teacher 1"}, 
    {Cat: 4000,Code: "NSM0003",Department: "Natural Science and Mathematics",EmpNo: 108224,Fullname: "Shiji Matthew",Roles: "Teacher 1"}, 
    {Cat: 4000,Code: "NSM0004",Department: "Natural Science and Mathematics",EmpNo: 108482,Fullname: "Aman George",Roles: "Teacher 2"}
]

这就是我在我的html上显示它的方式：

empList.then((data) => {
    console.log(data);
    data.map((x) => {
        if(x.Cat === 4000){ 
            //console.log(x)
            let container = document.querySelector('.container')
            
            let teacher = document.querySelector('.teacher')
            if(!teacher){
                teacher = document.createElement('div')
                teacher.className = 'teacher'
                teacher.id = 'card-stats'
                
                container.appendChild(teacher)
            }
            
            let job = document.createElement('button')
            job.className = 'cust-collapsible custom-collapsible-color'
            job.innerHTML = x.Code
            
            teacher.appendChild(job)
            if(x.EmpNo){
                let content = document.createElement('div')
                content.className = 'cust-content gradient-45deg-purple-green'
                
                let p = document.createElement('p')
                p.innerHTML = x.Fullname
                
                content.appendChild(p)
                teacher.appendChild(content)
            }
        }
    })
})

我也有这个脚本来让我的元素在用户点击这个元素时可以折叠：

var coll = document.getElementsByClassName('cust-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";
        } 
    });
}

我的问题是，一旦它显示在我的 HTML 上，我的可折叠文件就无法使用来自我的 excel 的数据，但如果列表（静态），说：

const empList = [
    {Cat: 4000,Code: "NSM0001",Department: "Natural Science and Mathematics",Roles: "Teacher 1"},
    {Cat: 4000,Code: "NSM0002",Department: "Natural Science and Mathematics",EmpNo: 107017,Fullname: "Krishna Patayan",Roles: "Teacher 1"}, 
    {Cat: 4000,Code: "NSM0003",Department: "Natural Science and Mathematics",EmpNo: 108224,Fullname: "Shiji Matthew",Roles: "Teacher 1"}, 
    {Cat: 4000,Code: "NSM0004",Department: "Natural Science and Mathematics",EmpNo: 108482,Fullname: "Aman George",Roles: "Teacher 2"}
]

在我的js文件中声明，可折叠的工作正常。

我在这里想念什么？很感谢任何形式的帮助。

标签： javascriptlistdrop-down-menupromise