1

CSSをいじり始めたところです。ボタンのクリックでトリガーされるアニメーション（メニュードロップダウン）を作成しようとしています。良い例を見つけましたが、フーバーイベントのトリガーで、いくつかの 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 に答える