最大高度的奇怪手风琴行为
Posted
技术标签:
【中文标题】最大高度的奇怪手风琴行为【英文标题】：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
更新： 问题在于最大高度，因为特定高度就像魅力一样。
【问题讨论】：
您是否要让它们都可以同时打开？ 这实际上是一个好问题。以前没有考虑过这个。 【参考方案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。 哦！ :) 。但这太棒了:)。以上是关于最大高度的奇怪手风琴行为的主要内容，如果未能解决你的问题，请参考以下文章