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 之类的东西来扩展容器以查看您的阅读更多数据