Question

首先在此处观看现场演示：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

单击顶部栏中间的BUTTON，展开包含内容的部分。目前，这种扩张并没有动画。

鉴于下面的代码和jsfiddle，动画这个的最佳方法是什么？我更喜欢使用CSS过渡。我并不担心移动设备是我的移动版本，这个按钮被隐藏起来并且无法点击。

jsFiddle： http://jsfiddle.net/HXVxs/

使用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>

HTML：

<!-- 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>

CSS：

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

谢谢！

编辑：快速说明......标准手风琴并不能解决我的问题。这样做的原因是标准手风琴会在点击包含div元素时显示其内容。在我的情况下，单击显示内容div的BUTTON与content-div本身是分开的。适应普通手风琴不适用于这种情况，或者我会从一开始就这样做。

再次感谢！

Answer 1

使用height（在0和scrollHeight之间切换）和CSS转换：Fiddle

Answer 2

作为一个随机的例子，看看： http://viralpatel.net/blogs/create-accordion-menu-jquery/

jQuery解决方案并不意味着你失去了CSS控制，恰恰相反。我使用“手风琴”相当多，他们在jQuery中工作得很好。浏览器兼容性也相当不错。

Answer 3

这是一部具有良好风格和动画的手风琴http://jqueryui.com/accordion/。查看页面侧面的示例。您可以点击页面底部的“查看来源”来查看源代码。

为Accordion型酒吧设置动画的最佳方式？

3 个答案: