1

我刚开始玩CSS。我正在尝试制作一个应该在单击按钮时触发的动画（下拉菜单）。我找到了一个很好的例子，但是在 hoover 事件的触发器中并改变了几个 div 的样式。

我想我需要在单击按钮时设置样式，然后在再次单击时将其更改回来。但我无法让它工作。

这是CSS：

            /* Static state */
            #container  { 
                width: 400px; 
                height: 400px; 
                position: relative; 
                border: 1px solid #ccc; 
            }
            .parent1    { 
                /* overall animation container */
                height: 0; 
                overflow: hidden;

                -webkit-transition-property: height;
                -webkit-transition-duration: .5s; 
                -webkit-perspective: 1000px; 
                -webkit-transform-style: preserve-3d; 

                -moz-transition-property:height; 
                -moz-transition-duration: .5s; 
                -moz-perspective: 1000px; 
                -moz-transform-style: preserve-3d; 

                -o-transition-property: all; 
                -o-transition-duration: .5s;
                -o-transform: rotateX(-90deg);
                -o-transform-origin: top;

                transition-property: height;
                transition-duration: .5s;
                perspective: 1000px;
                transform-style: preserve-3d;
            }
            .parent2    { 
                /* full content during animation *can* go here */ 
            }
            .parent3    { 
                /* animated, "folded" block */
                height: 56px; 

                -webkit-transition-property: all; 
                -webkit-transition-duration: .5s;
                -webkit-transform: rotateX(-90deg);
                -webkit-transform-origin: top; 

                -moz-transition-property: all; 
                -moz-transition-duration: .5s;
                -moz-transform: rotateX(-90deg);
                -moz-transform-origin: top; 

                -o-transition-property: all; 
                -o-transition-duration: .5s;
                -o-transform: rotateX(-90deg);
                -o-transform-origin: top;

                transition-property: all; 
                transition-duration: .5s;
                transform: rotateX(-90deg);
                transform-origin: top; 
            }

            /* Hover states to trigger animations */
            #container:hover .parent1   { height: 111px; }
            #container:hover .parent3   { 
                -webkit-transform: rotateX(0deg); 
                -moz-transform: rotateX(0deg); 
                -o-transform: rotateX(0deg); 
                transform: rotateX(0deg); 
                height: 111px; 
            }

这就是我一直在做的事情......

            <script>
            function fold()
            {
                var element = document.getElementById('parent1');
                element.style.height= 111;

                element = document.getElementById('parent3');
                var prop = getTransformProperty(element);
                element.style[prop] = 'rotateX(0deg)';
                element.style.height= 111;
            }

            function getTransformProperty(element) 
            {
                // Note that in some versions of IE9 it is critical that
                // msTransform appear in this list before MozTransform
                var properties = [
                    'transform',
                    'WebkitTransform',
                    'msTransform',
                    'MozTransform',
                    'OTransform'
                ];
                var p;
                while (p = properties.shift()) {
                    if (typeof element.style[p] != 'undefined') {
                        return p;
                    }
                }
                return false;
            }
        </script>

有任何想法吗？

4

2 回答 2

0

使用jQuery UI 手风琴可以节省大量时间和精力 

<script>
$(function() {
            $(".accordion").show().accordion({
                heightStyle: "content",
                collapsible: true,
                active: false,
                animate: {
                    duration: 1000,
                    easing: 'easeOutBounce'
                },
            });
        })
</script>

请注意，您可以随意设置此插件的样式，

.accordion {/* some style*/}

.ui-accordion-content {/* some style*/}

.accordion h6 {/* some style*/}

这是一个小提琴，显示了我如何滥用手风琴小部件。

于 2013-03-24T17:06:06.083 回答
-1

这里很简单：JSFiddle

HTML

<ul>
    <li>Something</li>
    <li>Something Else</li>
    <li>Another Thing</li>
    <li>Or This</li>
</ul>
<br>
<br>

<h3>
    Dropdown Example -
    <a href="#">Amir Mehdi</a>
</h3>

Javascript

$("div , li").click(function () {
    $("ul").slideToggle(120);
});
于 2013-06-02T13:44:40.880 回答