通过单击按钮，我成功地执行了div的转换(通过其"height"属性(，以显示一些菜单选项。在转换结束时，我希望"height"属性设置为"auto"，这样它就可以适应内部内容的任何更改。
我曾尝试在以下代码中使用"最大高度"，但转换似乎无法使用"最大身高"。如果我使用"高度"，则过渡有效。我曾尝试使用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："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>
你能用html更新你的问题吗。如果你能添加一个演示，那就更好了，因为它还不够清楚，无法理解你所期望的的概念
就我所能理解的问题而言。我不知道我是否能解决你的问题/要求，但我还是写了一个解决方案。
$("#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>