使用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