嵌套JQuery DataTable的Accordion无法设置动态高度问题

这个问题我之前帮别人排查过好几次，核心就是Accordion的高度在初始化后就固定了，DataTable子行展开后内容变高但Accordion没跟上。给你几个落地性强的解决办法：

思路1：监听DataTable子行事件，实时更新Accordion高度 #

DataTable自带子行展开/折叠的专属事件，我们可以利用它触发Accordion重新计算高度，精准度最高：

// 先获取你的DataTable实例
var dt = $('#your-table-id').DataTable({
  // 你的DataTable原有配置
});

// 监听子行展开事件
dt.on('childRow.dt', function(e, row, child){
  // 找到当前行所属的Accordion对应的内容容器
  var panel = $(row).closest('.accordion').next('.panel');
  // 把容器高度设为auto，让它自适应内容
  panel.css('height', 'auto');
});

// 监听子行折叠事件（同样需要更新高度）
dt.on('childRow.dt', function(e, row){
  var panel = $(row).closest('.accordion').next('.panel');
  panel.css('height', 'auto');
});

思路2：重构Accordion的高度逻辑，去掉固定高度限制 #

从你提供的代码片段看，这是原生JS实现的Accordion，原本的高度切换可能用了固定像素值，直接改成自适应逻辑就行：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    // 替换固定高度逻辑为auto自适应
    if (panel.style.height === "auto" || panel.style.height === "") {
      panel.style.height = "0";
    } else {
      panel.style.height = "auto";
    }
  });
}

这里的关键是把Accordion内容容器panel的高度设置为auto，而不是硬编码的像素值，这样内容变化时容器会自动“撑起来”。

思路3：给带动画的Accordion适配过渡效果 #

如果你的Accordion用了CSS过渡动画，直接设auto会导致动画失效，这时候可以先获取内容的真实高度（scrollHeight）再设置像素值：

/* 先给panel加过渡样式 */
.panel {
  overflow: hidden;
  transition: height 0.3s ease;
}

// 更新高度的逻辑改成：
function updateAccordionHeight(panel) {
  // 先触发重绘获取真实高度
  panel.style.height = 'auto';
  var realHeight = panel.scrollHeight;
  // 再设置回像素值触发动画
  panel.style.height = realHeight + 'px';
}

// 在DataTable子行事件里调用
dt.on('childRow.dt', function(e, row){
  var panel = $(row).closest('.accordion').next('.panel');
  updateAccordionHeight(panel);
});

内容的提问来源于stack exchange，提问作者mistermoose