javascript - 可折叠不工作 [包含 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 的第一个元素)。您可以做什么而不是传递事件然后使用 'closest'并在那里传递 id(如果您的目的是隐藏图像)。如果没有，您可以删除 onclick 上的 display() 。

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