纯CSS实现点击事件展现隐藏div菜单列表/元素切换

番茄西红柿发布于2019-04-23 11:50 / 2860人阅读

摘要：在写移动端导航的时候经常用到点击按钮出现隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错当然还有使用纯实现的小代码段。另外使用作为选择器仅为了兼容更低版本的

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯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实现元素隐藏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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