最大高度的奇怪手风琴行为答案

【问题标题】：Strange accordion behavior with max-height最大高度的奇怪手风琴行为
【发布时间】：2016-01-24 16:38:58
【问题描述】：

我正在创建手风琴，但由于 height: 0 和 height: auto 之间的过渡无法动画化，我找到了一种动画化 max-width 的方法但是像你这样可以看到时间轴不好，在打开用户点击的那个之前，然后关闭其他的。有办法解决吗？

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

FIDDLE HERE

更新：
问题在于最大高度，因为特定高度就像魅力一样。

【问题讨论】：

您是否要让它们都可以同时打开？
这实际上是一个好问题。以前没有考虑过这个。

标签： javascript jquery html css accordion

【解决方案1】：

删除

.removeClass

喜欢这个

$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).addClass("active").siblings("active");
});
});

【讨论】：

【解决方案2】：

你可以只使用 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 - 很可能是出于同样的原因。

【讨论】：

它看起来有效。但是能解释一下为什么我的方法不行吗？ ps：如果可能的话，我更喜欢使用类，因为您可以添加更多动画
是的，给我一秒钟
感谢您的回复。所以我认为有两种解决方案。第一个：设置每个高度，然后为该高度设置动画或第二个：使用 slideUp 和 slideDown。
@dghez 你很受欢迎。如果您真的知道高度，最好还是直接使用高度（而不是最大高度）:)
我没有。手风琴里面有一些文字，无法设置固定高度；）

【解决方案3】：

只需使用 Jquery Ui Accordion。太棒了。
这里是JssFiddle

  <head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>    
<div id="accordion">
  <h3>Part1</h3>
  <div> <p>  1  </p> </div>
  <h3>part2</h3>
  <div> <p>  2  </p> </div>
  <h3>Part3</h3>
  <div>  <p>   3  </p>  </div>
  <h3>Part4</h3>
  <div>  <p>  4 </p>  </div>
</div>
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
    </body>

【讨论】：

是的，但我不想添加 jQuery UI。
哦！ :) 。但这太棒了:)。