Question

我有一个包含带有内容的div的按钮。单击div时，我希望展开折叠的内容。就像我喜欢的那样，将鼠标悬停在div上方时，它会更改颜色，并且指针也会更改。但是，单击时没有任何反应：折叠的内容不会扩展。我的代码有什么问题？

var coll = document.getElementsByClassName("contents");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var collapse = this.nextElementSibling;
    if (collapse.style.display === "block") {
      collapse.style.display = "none";
    } else {
      collapse.style.display = "block";
    }
  });
}

<div class="results">

  <button type="button" class="contents">
          <div class="info">
            ...
          </div>
          </button>
  <div class="collapse">
    <p>Text only shown when expanding</p>
  </div>

</div>

Answer 1

最好使用jQuery作为客户端框架，以获得更好的性能，跨浏览器和更少的代码行。

您可以为项目使用$('.collapse').slideToggle()功能。 Documentation

Answer 2

好的...当我将script标签放在末尾而不是头部的时候，它就起作用了！

可折叠不展开

2 个答案: