Javascript 如何进行平滑嵌套转换_Javascript_Html_Css_Transitions

Javascript 如何进行平滑嵌套转换

javascript html css

Javascript 如何进行平滑嵌套转换,javascript,html,css,transitions,Javascript,Html,Css,Transitions,我想做一些类似于jsfiddle中的事情，只是我想让子div向下推父div的最大高度。现在，为了完全展开所有内容，您需要打开所有内部div，然后打开和关闭外部div以刷新最大高度。我希望父div的最大高度从子div中推出。最简单的方法是什么编辑：所以我知道需要做什么，但我不知道怎么做。我需要使用一种方法，当所有div都没有隐藏时，测量父div的最大高度。这将替换“content.scrollHeight”变量。但我不知道我该如何衡量这一点在所有子div未隐藏的情况下，如何获得父div的最大高

我想做一些类似于jsfiddle中的事情，只是我想让子div向下推父div的最大高度。现在，为了完全展开所有内容，您需要打开所有内部div，然后打开和关闭外部div以刷新最大高度。我希望父div的最大高度从子div中推出。最简单的方法是什么

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

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

var coll=document.getElementsByClassName（“failureHeader”）；
var i；
对于（i=0；i内容
内容
内容
内容
内容
内容
.failureHeader{
颜色：#cc0000；
光标：指针；
宽度：50vw；
保证金：自动；
背景色：#F2F2；
}
.failureHeader:之后{
内容：“\002B”；
颜色：#cc0000；
字体大小：粗体；
浮动：对；
左边距：1vw；
}
.失败内容{
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
宽度：50vw；
保证金：自动；
}
.failureHeader:悬停{
背景色：#B3；
}
.活动：之后{
内容：“\2212”；
}

这很棘手，因为如果在执行转换时读取高度，它将是当前高度，而不是您需要的实际高度。一个（糟糕的）解决方法是将

最大高度设置为大于预期的最大高度。或者干脆用JS来做肛门手术。@Gabriel我就是这么做的，但我一点也不喜欢。它干扰了我的动画，我不喜欢硬编码。
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";
}