如何设置通过类更改为“自动”-javascript 的 DIV 的“高度”属性？答案

【问题标题】：How to set the 'height' property of a DIV that has undergone a transition through change in class to 'auto'- javascript?如何设置通过类更改为“自动”-javascript 的 DIV 的“高度”属性？
【发布时间】：2018-07-26 06:24:45
【问题描述】：

通过单击一个按钮，我成功地执行了一个 div 的转换（通过它的“高度”属性）以显示一些菜单选项。在过渡结束时，我希望将“高度”属性设置为“自动”，以便它可以适应其中内容的任何变化。

我已尝试在以下代码中使用“最大高度”，但转换似乎不适用于“最大高度”。如果我使用“高度”，则过渡有效。我尝试使用javascript在转换后通过另一个触发器将“height”属性设置为“auto”，然后在执行该转换之前将其设置为当前高度（而不是“auto”）以关闭 DIV，通过更改在课堂上，但这失败了 - 我猜是因为将元素高度设置为任何值优先于试图更改相同属性的类中的任何后续更改。请不要 JQUERY 回复。

CSS：

.sbox{
    height: 0px;
    transition: height 1s ease-out;
    overflow: hidden;
}

.sboxopen{
    max-height: 430px;
    overflow: hidden;
    transition: max-height 1s ease-out;
}

JAVASCRIPT： “点击”事件

 elem.className = 'sboxopen';  // Show boax
 elem.className = 'sbox';  // Hide box

HTML：

 <div class="sbox">
      // CONTENT IN HERE


 <div>
 <button id="id">Show options</button>

【问题讨论】：

您可以添加您的 HTML 代码，或者更好地使用 SO sn-p 给我们一个演示
嗨。如果不查看您的代码的最小示例，我们可能无法帮助您解决问题。请阅读minimal reproducible example，看看你是否可以创建一个。
max-height 技巧仅在您希望 div 的高度从特定值增加到自动时才有效。我不清楚你想要达到的目标，但我相信你需要的是最小高度。
我认为这是this的副本。

标签： javascript css css-transitions

【解决方案1】：

你能用你的 html 更新你的问题吗？如果你能添加一个演示会更好，因为它不够清楚，无法理解你所期望的概念

【讨论】：

【解决方案2】：

据我所知，这个问题。我不知道我是否可以解决您的问题/要求，但我仍然写了下面给出的解决方案。

$("#toggle-box").click(function() {
  if ($("#slider-box").hasClass("sbox")) {
    $("#slider-box").attr("class", "sboxopen");
  } else {
    $("#slider-box").attr("class", "sbox");
  }
})

#slider-box {
  overflow: auto;
}

.sbox {
  height: 0px;
  transition: height 1s ease-out;
}

.sboxopen {
  height: 200px;
  transition: all 1s ease-out;
}

button {
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="sbox" id="slider-box">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis mollis suscipit. Etiam pellentesque leo vel est tempus, nec interdum nisl commodo. In sagittis efficitur nulla pretium aliquet. Sed non urna nisl. Mauris nec metus nisl. In metus
      nulla, semper vitae interdum sed, elementum sed libero. Vivamus posuere, turpis vel tempor aliquet, nibh est ullamcorper lorem, non sodales ex turpis non mauris. Proin hendrerit eget urna vitae tempor. Nunc eu nisi orci. Nulla et neque volutpat,
      mattis neque nec, pretium nibh. In at maximus justo. Nunc aliquet ornare ante, id lobortis turpis convallis vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu mauris et sem malesuada tempus
      vel at nisi. Morbi ac erat vestibulum, fermentum urna nec, suscipit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam ac enim pharetra molestie. Quisque molestie pulvinar enim, et fermentum orci rhoncus id.
      Praesent ultricies, diam quis aliquet faucibus, mauris risus lobortis quam, nec interdum arcu nunc ac ipsum. Nam malesuada suscipit dui non scelerisque. Aenean pretium pretium congue. Vivamus viverra, leo et rutrum commodo, nunc libero accumsan
      erat, id facilisis velit dolor condimentum urna. Cras cursus accumsan diam ac scelerisque. Donec dapibus, urna eu posuere venenatis, tortor diam vestibulum augue, sit amet consectetur metus ligula in turpis.
    </p>
  </div>
  <div>
    <button id="toggle-box">Toggle Box</button>
  </div>
</body>

</html>

【讨论】：