1

首先在这里查看现场演示：http: //khill.mhostiuckproductions.com/siteLSSBoilerPlate/

单击顶部栏中间的按钮，展开包含内容的部分。就目前而言，这个扩展没有动画。

给定下面的代码和 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 与内容 div 本身是分开的。改编普通的手风琴不适用于这种情况，或者我会从一开始就这样做。

再次感谢！

4

3 回答 3

1

使用height（在 0 和 之间切换scrollHeight）和 CSS 过渡：小提琴

于 2013-02-10T04:40:45.033 回答
0

这是一个风格和动画都很好的手风琴http://jqueryui.com/accordion/。检查页面侧面的示例。您可以单击页面底部的“查看源代码”查看源代码。

于 2013-02-10T04:30:45.637 回答
0

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

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

于 2013-02-10T04:08:58.980 回答