使用CSS的手風琴

Question

下面是HTML代碼，我想讓手風琴使用CSS，而不使用jquery，其中當頁面加載第一個選項卡時默認打開當我點擊另一個選項卡時，它的div將打開並且先前打開的選項卡自動關閉。

<div id="wrap"> 


     <ul id="accordion"> 
      <li> 
       <h2>Title One</h2> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
       </div> 
      </li> 
      <li> 
       <h2>Title Two</h2> 
       <div class="content"> 
        Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 
       </div> 
      </li> 
      <li> 
       <h2>Title Three</h2> 
       <div class="content"> 
        Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. 
       </div> 
      </li> 
      <li> 
       <h2>Title Four</h2> 
       <div class="content"> 
        Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </li> 
     </ul> 

    </div><!-- wrap --> 

下面是我使用中的標籤hover.but我想在我的方式請幫助鼠標打開CSS。
注
我也想在任何選項卡已激活其對小鼠標題顏色changes.and於其他任何標籤的顏色也會改變

#wrap{ 
      margin-left:5px; 
    margin-top:5px; 
      width: 100px; 
     } 

     #accordion{ 
      width: 200px; 
      margin: 0px; 
      padding: 0px; 
      list-style: none; 
     } 

     #accordion h2{ 
      font-size: 10pt; 
      margin: 0px; 
      padding: 5px; 
      background: #ccc; 
      border-bottom: 1px solid #fff; 
    cursor:pointer; 
     } 
     #accordion li div.content{ 
      display: none; 
      padding:5px; 
      background: #f9f9f9; 
      border: 1px solid #ddd; 
     } 

     #accordion li:hover div.content{ 
      display: inherit; 

     } 

Answer 1

退房這個問題問＃2：

CSS active

基本上，您可以將第一個菜單設置爲使用常規css規則顯示。當您想要切換菜單時，可以使用<button>whatever</button>或<a href="#">whatever</a>標籤，並更改每個按鈕的css活動規則以隱藏每個其他菜單，但只點擊一個。 （如上面的鏈接所示）

這樣做的缺點是您的瀏覽器不兼容，因爲它是css的最新規則。如果你想保持兼容性，我建議切換到JavaScript的菜單。

Answer 2

看一看這會幫助，因爲它是你在找什麼

http://tympanus.net/Tutorials/CSSClickEvents/index.html