javascript - 最大高度的奇怪 Accordion 行为

Question

我正在创建 Accordion ，但由于 height: 0 和 height: auto 之间的过渡无法设置动画，我找到了一种设置 max- 动画的方法宽度 但是就像你看到的那样，时间线不好，在打开用户点击的那个之前，然后关闭其他的。 有办法解决吗？

.content{
  overflow: hidden;
  max-height: 0;
  transition: all 1s;
}
.active .content{
  max-height: 500px;
}

FIDDLE HERE

更新:
问题是关于最大高度，因为具有特定的高度就像一个魅力。

Answer 1

您可以只使用 jQuery 的 sliedUp()和 slideDown() :

$(document).ready(function(){
    $(".singleAccordion").on("click", function(){
        $(this).siblings().children(".content").slideUp();
        $(".content", this).slideDown();
    });
});

使用以下 CSS:

.content{
  overflow: hidden;
  max-height: 500;
  display: none;
}

---

让我试着给出一些解释。

通常两个转换应该(几乎)同时运行。如果您将 max-height 替换为 height (在您的原始代码中)，您会发现情况确实如此。但是对于 max-height 这似乎是不同的。我不知道为什么会这样，但我猜想当其他转换在同一个 DOM 子树上运行时，可能很难推导出必须应用的实际高度，所以它是刚开始排队。

我会查看一些文档，看看这背后的原因是什么。如果我找到更多情报，我会回来报告。

---

好吧，我挖得更深了一点。看起来实际高度的计算确实是个问题。使用上面的代码并将 max-height: 500px 替换为 max-height: 5000px。你会发现在崩溃发生之前需要很长时间。现在把 max-height: 50px 放在那里，它们看起来会同时发生。 也许这是因为它仍在超出实际需要的高度进行动画处理。伤心的你can't animate onto height: auto - 很可能出于完全相同的原因。