Question

通过单击按钮，我成功地执行了div的过渡（通过其“ height”属性）以显示一些菜单选项。在过渡结束时，我希望将“ height”属性设置为“ auto”，以便它可以容纳其内部内容的任何更改。

我尝试在以下代码中使用“ max-height”，但过渡似乎不适用于“ max-height”。如果我使用“高度”，则过渡有效。我尝试使用javascript在过渡后通过另一个触发器将'height'属性设置为'auto'，然后在执行该过渡以通过更改关闭DIV之前将其设置为当前高度（而非'auto'）在类中，但是失败了-我猜是因为将元素高度设置为任何值都优先于类中试图更改相同属性的任何后续更改。请没有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： “ onclick”事件

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

HTML：

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


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

Answer 1

能否用html更新您的问题。如果您还可以添加一个演示，那会更好，因为它还不够清楚，无法理解您期望的概念

Answer 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>

如何设置已通过将类更改为“自动”-JavaScript进行了转换的DIV的“高度”属性？

2 个答案: