簡單的頁面，當然是能不寫js，就不寫js
純css方法第一種~利用input的checked
先看html
<div class="drop-list">
<label for="status-toggle">情況</label>
<input name="option1" type="checkbox" id="status-toggle"/>
<ul class="drop-menu status-menu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
</ul>
<span class="caret"></span>
</div>```
label要寫一個for對應input的id,同時css將checkbox隱藏
可以給label一個 `cursor:pointer;` 效果更好
核心css思想，利用checked 然后 + ul來進行顯示(+是選擇兄弟元素）
經過實驗，發現也可以寫height,opacity等配合transtion 動畫效果
```css
input[type="checkbox" i]{
display: none;
}
input[type="checkbox" i]:checked + ul {
display: block;
}
這種方法有一個缺點，就是可以同時打開多個菜單
并且必須點擊label才能關閉，因為這是checkbox的性質
純css方法第二種~利用:focus和poiont
先看html
<div class="drop-list" tabindex="0">所在地
<ul class="drop-list-content">
<li>First link</li>
<li><a >Second link</a></li>
<li><a >Third link</a></li>
</ul>
<span class="caret"></span>
</div>```
劃重點了~~~一定要寫tabindex
這個focus屬性，本來是配合鍵盤tab使用的
現在拿來用一下，沒發現什么不妥
然后我們看css，因為在用less，就直接復制過來了。
```css
.drop-list {
cursor: pointer;
&:focus {
pointer-events: none;
outline: none;
}
&:focus .drop-list-content {
display: block;
pointer-events: auto;
}
.drop-list-content {
display: none;
position: absolute;
}
}```
繼續劃重點，這里有一個新屬性，pointer-evnents。
是用來取消一個鏈接的點擊跳轉功能，具體展開各位可以移步張鑫旭大神的文章。
>當focus時，a，button是無法被打開的的？具體原理尚未研究，不給a設置，也可以給li標簽設置onclick行為open網頁。
>另外，同樣可以把display改成visiblity，也是另一種方法。
###純css方法第三種，利用:target偽類
有待嘗試，未完待續
需求來源于IT修真院的CSS任務
這是我的邀請鏈接http://www.jnshu.com/login/1/95597606