Question

除了我希望父div的最大高度被子div压低外，我想做类似于jsfiddle的操作。现在，为了完全扩展所有内容，您需要打开所有内部div，然后打开和关闭外部div以刷新最大高度。我希望将父div的最大高度从子div中推出。最简单的方法是什么？

编辑：所以我知道需要发生什么，但我不知道该怎么做。当所有div未隐藏时，我需要使用某种方法来测量父div的最大高度。这将替换“ content.scrollHeight”变量。我不知道该如何衡量。

在不隐藏所有子div的情况下，如何获得父div的最大高度？

http://jsfiddle.net/yajfwmxq/13/

var coll = document.getElementsByClassName("failureHeader");
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";
    }
  });
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h2 class="failureHeader">Div 1</h2>
        <div class="failureContent">
          <h3 class="failureHeader">Div 2</h3>
          <div class="failureContent">
            <h4 class="failureHeader">Div 3</h4>
            <div class="failureContent">
            <p>Content<br>Content<br>Content<br>Content<br>Content<br>Conten</p>
          </div>
        </div>
      </div>
    </body>
</html>

.failureHeader{
  color: #cc0000;
  cursor: pointer;
  width: 50vw;
  margin: auto;
  background-color: #f2f2f2;
}

.failureHeader:after {
  content: '\002B';
  color: #cc0000;
  font-weight: bold;
  float: right;
  margin-left: 1vw;
}

.failureContent{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 50vw;
    margin: auto;
}

.failureHeader:hover {
  background-color: #b3b3b3;
}

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

如何进行平滑的嵌套过渡

0 个答案: