Javascript 无法为带有嵌套数据表的accordion设置动态高度

我有一个手风琴按钮，里面有一个嵌套的JQuery数据表。datatable有可折叠的子行，可以扩展，但问题是我无法让accordion在打开子行时动态调整其高度。因此，每当子行展开时，表的底部就会被截断

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

可在此处找到完整的工作演示：

---

有没有一种方法可以调整accordion的JS，以便高度可以随数据表的变化而变化？

一种方法是在“带类的div”面板上设置overflow属性。基本上，如果内容超过了视口，就会出现一个滚动条

div.panel{
  overflow:auto;
}

---

在展开main

accordian

时设置了

max height

，但在单击子行时没有再次重置它，因此

max height

阻止了

面板

容器进一步展开

将本节和css中的

max height

更改为simply

height

if (panel.style.height && panel.style.height !== '0px') {
    panel.style.height = '0px';
} else {
    panel.style.height = auto; /* setting height to 'auto' instead of calculation */
}

css

---

这正是我要找的。感谢您的回答和提供的小提琴！伟大的很高兴能帮上忙。这是一个很好的解决办法，以防我无法自动调整高度。感谢您抽出时间回答！

.panel {
    padding: 0 18px;
    background-color: white;
    height: 0px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}