在寫移動端導航的時候經常用到點擊按鈕出現/隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯；當然還有使用純JS實現的小代碼段。我這裡整理了純CSS實現方式，給需要的人和給自己做個筆記： 實現原理利用CSS偽類:target 可以配合CSS3過渡做出很多不同的效果，具體不做詳 ...
在寫移動端導航的時候經常用到點擊按鈕出現/隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯；當然還有使用純JS實現的小代碼段。我這裡整理了純CSS實現方式，給需要的人和給自己做個筆記：
實現原理利用CSS偽類:target
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>純CSS實現點擊事件展現隱藏div菜單列表</title> 6 <style> 7 /*樣式預設，可根據自身情況設定增刪*/ 8 .l-btn{ 9 position: relative; 10 width: 1.875rem; 11 height: 1.875rem; 12 } 13 .l-btn>a:first-child,.l-btn>a:first-child+a{ 14 width: 1.875rem; 15 height: 1.875rem; 16 line-height: 1.875rem; 17 text-align: center; 18 cursor: pointer; 19 text-decoration: none; 20 } 21 .l-btn>a:first-child+a+*{ 22 position: absolute; 23 width: 20rem; 24 display: none;/*這個樣式可以設置透明度、高度等進行變換，配合CSS3過渡，達到更美觀的效果，這裡僅做功能*/ 25 } 26 27 /*單獨*/ 28 .l-btn>a:first-child{ 29 display: block; 30 } 31 .l-btn>a:first-child+a{ 32 display: none; 33 } 34 /*-----為了方便理解，這裡單獨拿出來寫，實際應用時可進行CSS分組合併----*/ 35 .l-btn>a:first-child:target{ 36 display: none; 37 } 38 .l-btn>a:first-child:target+a{ 39 display: block; 40 } 41 .l-btn>a:first-child:target+a+*{ 42 display: block;/*這裡需要與上面設置的屬性匹配*/ 43 } 44 </style> 45 </head> 46 47 <body> 48 <div class="l-btn"> 49 <a href="#l-btn-a" id="l-btn-a">三</a> 50 <a href="#l-btn-b" id="l-btn-b">X</a> 51 <div>我是菜單列表</div> 52 </div> 53 </body> 54 </html>
可以配合CSS3過渡做出很多不同的效果，具體不做詳細演示
效果沒有JS那麼完美，畢竟地址欄會出現你的錨點信息，當然這是比較小的瑕疵，好處應該是輕量吧。。
另外使用:first-child（CSS2）作為選擇器僅為了相容更低版本的IE
