成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2866人閱讀

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

在寫移動端導(dǎo)航的時候經(jīng)常用到點擊按鈕出現(xiàn)/隱藏導(dǎo)航條的情況，最常見的方法當然還是前端框架直接調(diào)用，省心省力，不易出錯；當然還有使用純JS實現(xiàn)的小代碼段。我這里整理了純CSS實現(xiàn)方式，給需要的人和給自己做個筆記：

實現(xiàn)原理利用CSS偽類:target

 1 doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>純CSS實現(xiàn)點擊事件展現(xiàn)隱藏div菜單列表title>
 6     <style>
 7         /*樣式預(yù)設(shè)，可根據(jù)自身情況設(shè)定增刪*/
 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;/*這個樣式可以設(shè)置透明度、高度等進行變換，配合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         /*-----為了方便理解，這里多帶帶拿出來寫，實際應(yīng)用時可進行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;/*這里需要與上面設(shè)置的屬性匹配*/
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那么完美，畢竟地址欄會出現(xiàn)你的錨點信息，當然這是比較小的瑕疵，好處應(yīng)該是輕量吧。。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1228.html

相關(guān)文章

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

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

    BigTomato 評論0 收藏0

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

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

    lanffy 評論0 收藏0

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

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

    張金寶 評論0 收藏0

  • 原生js練習題---第六課

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

    tinyq 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<