簡單的頁面笆豁，當(dāng)然是能不寫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對應(yīng)input的id,同時css將checkbox隱藏
可以給label一個 `cursor:pointer;` 效果更好
核心css思想价卤，利用checked 然后 + ul來進(jìn)行顯示(+是選擇兄弟元素）
經(jīng)過實驗，發(fā)現(xiàn)也可以寫height,opacity等配合transtion 動畫效果
```css
input[type="checkbox" i]{
display: none;
}
input[type="checkbox" i]:checked + ul {
display: block;
}
這種方法有一個缺點渊涝，就是可以同時打開多個菜單
并且必須點擊label才能關(guān)閉慎璧，因為這是checkbox的性質(zhì)
純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使用的
現(xiàn)在拿來用一下，沒發(fā)現(xiàn)什么不妥
然后我們看css，因為在用less蝗岖，就直接復(fù)制過來了穿铆。
```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;
}
}```
繼續(xù)劃重點，這里有一個新屬性，pointer-evnents。
是用來取消一個鏈接的點擊跳轉(zhuǎn)功能蛾默，具體展開各位可以移步張鑫旭大神的文章捷绒。
>當(dāng)focus時瑰排，a，button是無法被打開的的暖侨？具體原理尚未研究椭住，不給a設(shè)置，也可以給li標(biāo)簽設(shè)置onclick行為open網(wǎng)頁字逗。
>另外京郑，同樣可以把display改成visiblity，也是另一種方法扳肛。
###純css方法第三種傻挂，利用:target偽類
有待嘗試，未完待續(xù)
需求來源于IT修真院的CSS任務(wù)
這是我的邀請鏈接http://www.jnshu.com/login/1/95597606