动态创建的Collapsible点击后内容无法显示的技术求助

我帮你找到了两个核心问题，咱们一步步解决：

1. 动态创建的按钮丢失了collapsible类 #

看你addElement函数里这行代码：

newDiv.classList = "div";

你原本创建按钮时设置了class='collapsible'，但这行代码直接把类替换成了div，导致按钮既没有触发事件监听的类名，也无法应用CSS里的折叠面板样式。

修复方法：把这行改成添加类，而不是替换：

newDiv.addClass("div");

（如果div这个类没有实际样式，甚至可以直接删掉这行，因为咱们需要保留collapsible类）

2. 动态添加的元素没有绑定点击事件 #

你页面初始化时执行的事件监听代码，只会给当时已经存在的collapsible元素绑定点击事件，后续动态创建的元素不会自动带上这个事件。

这里推荐用事件委托的方式，把事件绑定到父元素（比如body）上，这样不管元素是一开始就有还是后来动态添加的，只要匹配选择器就能触发事件。

替换原来的事件监听代码：

// 删掉原来的for循环绑定代码，换成下面的事件委托
document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('collapsible')) {
    const btn = e.target;
    btn.classList.toggle("active"); 
    console.log("opened content") 
    var content = btn.nextElementSibling; 
    if (content.style.maxHeight){ 
        content.style.maxHeight = null; 
    } else { 
        content.style.maxHeight = content.scrollHeight + "px"; 
    }
  }
});

完整修复后的代码 #

JavaScript部分 #

var elementCounter = 0; 
var elementCounterContent = 0; 
var text; 

function addElement() { 
    text = document.getElementById("input").value; 
    var newDiv = $("<button class='collapsible'></button>").text(text); 
    var newContentOfDiv = $("<div class='content'><input type='text'></div>"); 
    newDiv.id = 'temp' + elementCounter; 
    newContentOfDiv.id = 'content' + elementCounterContent; 
    console.log(newDiv.id); 
    console.log(newContentOfDiv.id); 
    // 修复：添加类而不是替换
    newDiv.addClass("div"); 
    elementCounter++ 
    elementCounterContent++ 
    document.getElementById("input").value = ""; 
    $("body").append(newDiv, newContentOfDiv); 
} 

// 事件委托方式绑定点击事件
document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('collapsible')) {
    const btn = e.target;
    btn.classList.toggle("active"); 
    console.log("opened content") 
    var content = btn.nextElementSibling; 
    if (content.style.maxHeight){ 
        content.style.maxHeight = null; 
    } else { 
        content.style.maxHeight = content.scrollHeight + "px"; 
    }
  }
});

CSS和HTML部分保持不变 #

这样修改后，你动态创建的折叠面板点击时就能正常展开/收起内容了。

内容的提问来源于stack exchange，提问作者hp2345