Question

我正在制作一支手风琴，但由于height: 0和height: auto之间的转换无法动画，我找到了一种动画方式max-width 但是就像你可以看到时间线不好，在打开用户点击的那个之前，然后关闭其他的。有没有办法解决这个问题？

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

FIDDLE HERE

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

Answer 1

你可以使用jQuery＆＃39; 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 - 很可能出于同样的原因。

Answer 2

删除

.removeClass

像这样

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

Answer 3

只需使用Jquery Ui手风琴。太棒了。
这是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>

最大高度

3 个答案: