點擊動畫

Question

我剛開始用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> 

任何想法？

Answer 1

你可以使用節省了大量的時間和精力 - jQuery UI accordion

<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*/} 

這裏是一個fiddle演示瞭如何我濫用了手風琴小部件。

Answer 2

這很簡單：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); 
});