CSS3でアコーディオンメニューを作るにはどうすればいいですか？

Question

HTML5とCSS3のみで拡張可能なメニューを作成するにはどうすればよいですか？

4つのメニュー項目と1つのビューすべてのリスト項目を表示するには、すべてをクリックするとすべてのリスト項目が展開されます。

Answer 1

いくつかの方法があります。たとえば、次のようになります。 HTMLはこのように見えます。 divをクリックすると、その下にあるdivが展開されます。これはpseudo-selector：targetでのみ可能です。

<div class="accordion"> 
    <div id="one" class="section"> 
      <h3> 
        <a href="#one">Heading 1</a> 
      </h3> 
      <div> 
        <p>Content</p> 
      </div> 
    </div> 
    <div id="two" class="section"> 
      <h3> 
        <a href="#two">Heading 2</a> 
      </h3> 
      <div> 
        <p>Content</p> 
      </div> 
    </div> 
</div>​ 




.accordion h3 + div { 
     height: 0; 
     overflow: hidden; 
     -webkit-transition: height 0.3s ease-in; 
     -moz-transition: height 0.3s ease-in; 
     -o-transition: height 0.3s ease-in; 
     -ms-transition: height 0.3s ease-in; 
     transition: height 0.3s ease-in; 
} 

.accordion :target h3 + div { 
     height: 100px; 
} 

.accordion .section.large:target h3 + div { 
     overflow: auto; 
} 

私はあなたのために働くフィドルを作った。それを見て：あなたはこれをチェックアウトすることができCheck me out!

Answer 2

： http://thinkphp.github.com/cuba.js/accordion.html ソース：https://github.com/thinkphp/cuba.js 歓声！