可折叠不工作 [包含 JSFiddle 演示]

Question

我试图让这个可折叠对象正常运行，并在加载页面时显示第一组信息，当用户按下"阅读更多"时使其消失，并显示新信息。

<script>
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.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
function display() {
var x = document.getElementById("cover");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script> 

Answer 1

您将 onclick=display(( 附加到所有列表元素。GetElementById 将返回具有给定 id 的第一个元素，在这种情况下，它始终针对您的第一个封面(如果您在脚本中的其他地方触发它(。因此，由于每个"阅读更多"列表元素都有调用 display(( 的 onclick 函数，因此它总是命中您的第一个元素(因为它是具有相应 id 的第一个元素(。 你可以做什么来传递事件，然后使用"最接近"并在那里传入id(如果你的意图也是隐藏图像(。 如果没有，您可以在单击那里删除显示((。

其他元素按预期工作，但你看不到它，因为你在封闭容器上的 css 隐藏了它(如果你检查你的检查器，你会注意到 css 被设置为预期(。 您可能希望添加溢出滚动以在容器限制内滚动以查看扩展的数据，或者使用具有最小高度的 css flex 之类的内容来展开容器以查看读取更多数据