Question

在下面的代码中，我在另一个可折叠部分中有一个可折叠部分。当我打开最外面的可折叠部分时，它工作正常并向我显示它下面的内容。但是当我尝试打开内部可折叠部分时，它不会扩展到足以让我看到所有内容。请运行以下程序查看问题。

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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.collapsible {
  background-color: #2d2e2e;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: black;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.active:after {
  content: "\2212";
}

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;

}

<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="collapsible">Open Section 2</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Answer 1

如果不需要动画，您可以将 max-height 设置为 fit-content

否则，您可以将元素的 scrollHeight 添加到其父元素的高度中。并且为了避免设置过大的数量（如果同一个子项被多次打开/关闭），您可以添加 transitionend 甚至侦听器来设置适当的 max-height 父项：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
// managed by css
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      content.parentNode.style.maxHeight = (parseInt(content.parentNode.style.maxHeight) + content.scrollHeight) + "px";
    } 
  });
  coll[i].nextElementSibling.addEventListener("transitionend", function()
  {
      this.parentNode.style.maxHeight = this.parentNode.scrollHeight + "px";
  });
}

.collapsible {
  background-color: #2d2e2e;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: black;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.active:after {
  content: "\2212";
}

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
}

<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="collapsible">Open Section 2</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

另一个可折叠部分中的可折叠部分不会充分展开

1 个答案: