Javascript 制作手风琴类型栏动画的最佳方法？

首先在这里观看现场演示：

单击顶部栏中间的按钮，展开包含内容的部分。就目前情况而言，此扩展不具有动画效果

给出下面的代码和JSFIDLE，最好的动画制作方法是什么？我更喜欢使用CSS转换。我不担心手机，因为我的手机版本这个按钮是隐藏的，不能点击

jsFiddle:

Javascript:

<script language="javascript"> 
    function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "BUTTON";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = "BUTTON";
        }
    } 
    </script>

<!-- BUTTON PLACED IN MY TOP BAR -->
<div class="topbar">
<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>
</div>


<!-- TOP WIDGET (different from top-bar, placed above top-bar in my HTML structure) -->

<div class="top-widget">
<div class="company-list-toggle bottom-border" id="toggleText" style="display: none">

    <p>Sample text here...</p>

<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>

</div>
</div>

.top-widget { /* tried CSS3 transitions here and did not work */
    position: absolute;
    z-index: 100;
    background: #2b332a;
}

谢谢

编辑：快速注释。。。标准手风琴不能解决我的问题。原因是标准手风琴在单击包含的div元素时显示其内容。在我的情况下，单击时显示内容div的按钮与内容div本身是分开的。适应一个普通的手风琴在这种情况下不起作用，否则我会一开始就这样做

---

再次感谢

作为一个随机示例，请看：

---

jQuery解决方案并不意味着失去CSS控制，相反。我经常使用“手风琴”，它们在jQuery中工作得非常好。浏览器兼容性也很好。

作为一个随机示例，请看：

---

jQuery解决方案并不意味着失去CSS控制，相反。我经常使用“手风琴”，它们在jQuery中工作得非常好。浏览器兼容性也很好。

这是一款风格和动画都很好的手风琴。检查页面侧面的示例。您可以单击页面底部的“查看源代码”来查看源代码。

这是一款手风琴，具有良好的风格和动画效果。检查页面侧面的示例。您可以单击页面底部的“查看源代码”查看源代码。

使用

高度（在0和
滚动高度之间切换）和CSS转换：
使用
高度（在0和
滚动高度之间切换）CSS转换：
使用jQuery animate很容易做到这一点，但是如果你仍然想使用JS，那么你必须编写自己的代码来制作动画。我完全接受建议，我将如何使用jQuery animate来实现这一点？我还是想先看看是否有人有CSS解决方案。谢谢你可以很容易地用jQuery animate完成这项工作，但是如果你仍然想用JS，那么你必须编写自己的代码来制作动画。我完全愿意接受建议，我该如何用jQuery animate完成这项工作？我还是想先看看是否有人有CSS解决方案。谢谢你看到标签了吗？不幸的是，这对我的情况不太合适。推理：最初显示内容div的按钮位于显示内容的div之外。此解决方案假设我能够单击最终将扩展的DIV，但我不能。它们是独立的div。你看到标签了吗？不幸的是，这对我的情况不太适用。推理：最初显示内容div的按钮位于显示内容的div之外。此解决方案假设我能够单击最终将扩展的DIV，但我不能。它们是独立的div。因为，当然，。就像上面的解决方案一样。。。不幸的是，这对我的情况不太合适。推理：最初显示内容div的按钮位于显示内容的div之外。此解决方案假设我能够单击最终将扩展的DIV，但我不能。它们是独立的div。因为，当然，。就像上面的解决方案一样。。。不幸的是，这对我的情况不太合适。推理：最初显示内容div的按钮位于显示内容的div之外。此解决方案假设我能够单击最终将扩展的DIV，但我不能。他们是分开的。你的小提琴不在我这边工作，不知道为什么。你能再检查一下吗？取决于你的浏览器。Fiddle只支持IE10和Firefox。您可以通过添加
-webkit transition:height 1s ease
来添加对Chrome的支持。旧版本的IE不支持转换，但我认为这不重要，因为如果没有什么东西，它就不是世界末日。当然，我都没听清楚。这正是我需要的！多谢！你的小提琴不在我这边，不知道为什么。你能再检查一下吗？取决于你的浏览器。Fiddle只支持IE10和Firefox。您可以通过添加
-webkit transition:height 1s ease
来添加对Chrome的支持。旧版本的IE不支持转换，但我认为这不重要，因为如果没有什么东西，它就不是世界末日。当然，我都没听清楚。这正是我需要的！多谢！