純CSS實現點擊事件展現隱藏div菜單列表/元素切換

番茄西紅柿發布于2019-04-23 11:50 / 2861人閱讀

摘要：在寫移動端導航的時候經常用到點擊按鈕出現隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯當然還有使用純實現的小代碼段。另外使用作為選擇器僅為了兼容更低版本的

在寫移動端導航的時候經常用到點擊按鈕出現/隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯；當然還有使用純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">Xa>
51         <div>我是菜單列表div>
52     div>
53 body>
54 html>

可以配合CSS3過渡做出很多不同的效果，具體不做詳細演示

效果沒有JS那么完美，畢竟地址欄會出現你的錨點信息，當然這是比較小的瑕疵，好處應該是輕量吧。。

另外使用:first-child（CSS2）作為選擇器僅為了兼容更低版本的IE

GPU云服務器云服務器點擊隱藏div div+css導航菜單 js點擊元素隱藏 js實現元素隱藏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1228.html

FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

BigTomato 2019-08-29 15:17 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

lanffy 2019-08-26 17:29 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

張金寶 2019-08-02 10:22 評論0 收藏0
原生js練習題---第六課

摘要：自定義多級右鍵菜單實現效果自定義多級右鍵菜單第五課第六題中已經通過事件實現了一級右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽實現效果：6-01完美拖動這里沒有使用h5的拖動，畢竟原題也是考察借助鼠標事件實現自定義的拖動，所以就借鑒了《js高級程序設計》里的自定義拖動自己封裝了個拖動api，當然由于做這個系列題目使用的都是es5的語法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 評論0 收藏0