Javascript 动画手风琴：如何使其在可变高度下工作

我试图编写一个动画手风琴，它由一系列可点击的标题组成，当点击时，这些标题将在显示或折叠每个标题下的内容面板之间切换。动画只是由内容面板的高度和不透明度属性上的CSS转换组成。如果我为扩展的内容面板指定一个固定的高度（以像素为单位），这一切都会正常工作，但在我的例子中，我希望每个扩展的内容面板都具有灵活的高度，以适应可变的内容

以下是我迄今为止最努力的代码。我用于显示内容面板的CSS类是

display\u on

，我正在使用

calc（）

为height属性返回一个像素值。动画在不透明度方面的效果与预期的一样，但我对其在“高度”属性上的行为感到困惑。它似乎对显示阶段没有影响，在崩溃阶段，它只会导致与过渡时间（1秒）相等的延迟，然后内容面板急剧崩溃，而不是我正在寻找的渐进运动。有没有办法让这一切按我所希望的方式进行

以下是我的代码笔演示的链接：

我的HTML标记：

<h1 class="accordion_heading">
  Accordion Heading 1
</h1>
<div class="accordion_panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 2
</h1>
<div class="accordion_panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 3
</h1>
<div class="accordion_panel">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

My JavaScript可在CSS类上切换

display\u：

function accordionToggle(e){
  var target = e.target;
  if(target.classList.contains('accordion_heading')){
    var to_toggle = target.nextElementSibling;
        to_toggle.classList.toggle('display_on');
  }
}

document.addEventListener('click', accordionToggle);

使用
max height
代替高度动画，根据您的高度设置动画


功能手风琴切换（e）{
var目标=e.target；
if（target.classList.contains（'accordion\u heading'））{
var to_toggle=target.nextElementSibling；
to_toggle.classList.toggle（'display_on'）；
}
}
document.addEventListener（'单击'，手风琴切换）
.accordion\u标题{
保证金：5px；
字体大小：30px；
颜色：蓝色；
背景颜色：灰色；
填充：0.1em；
宽度：400px；
边界半径：5px；
}
.手风琴标题：悬停{
光标：指针；
颜色：深红色；
过渡：颜色0.3s；
}
.手风琴面板{
保证金：5px；
宽度：400px；
不透明度：0；
最大高度：0；
过渡：所有1都放松；
溢出：隐藏；
}
.显示{
不透明度：1；
最大高度：500px；
过渡：所有1都容易进入；
}

手风琴品目1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
手风琴品目2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
手风琴品目3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
解决方案：请参见演示：这非常有效！不过，如果我可以挑剔的话，过渡在两个方向上的速度并不相同，因为在折叠时，它是根据实际高度计算的，但在展开时，它是根据“最大高度”值计算的，该值是故意设置得非常高的。这是唯一能让它工作的方法吗？不确定，有一些事情可以用js完成：（作者也准确地指出了你所说的），但是，与其用js“注入样式”，我会用javascript/jquery代替css转换，在这种情况下。。。