在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。
我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:
实现原理利用CSS伪类:target
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现点击链接隐藏指定div代码写法</title> <style> /*样式预设,可根据自身情况设定增删*/ .l-btn{ position: relative; width: 1.875rem; height: 1.875rem; } .l-btn>a:first-child,.l-btn>a:first-child+a{ width: 1.875rem; height: 1.875rem; line-height: 1.875rem; text-align: center; cursor: pointer; text-decoration: none; } .l-btn>a:first-child+a+*{ position: absolute; width: 20rem; display: none;/*这个样式可以设置透明度、高度等进行变换,配合CSS3过渡,达到更美观的效果,这里仅做功能*/ } /*单独*/ .l-btn>a:first-child{ display: block; } .l-btn>a:first-child+a{ display: none; } /*-----为了方便理解,这里单独拿出来写,实际应用时可进行CSS分组合并----*/ .l-btn>a:first-child:target{ display: none; } .l-btn>a:first-child:target+a{ display: block; } .l-btn>a:first-child:target+a+*{ display: block;/*这里需要与上面设置的属性匹配*/ } </style> </head> <body> <div class="l-btn"> <a href="#l-btn-a" id="l-btn-a">三</a> <a href="#l-btn-b" id="l-btn-b">X</a> <div>我是菜单列表</div> </div> </body> </html>
可以配合CSS3过渡做出很多不同的效果,具体不做详细演示
效果没有JS那么完美,毕竟地址栏会出现你的锚点信息,当然这是比较小的瑕疵,好处应该是轻量吧。。
另外使用:first-child(CSS2)作为选择器仅为了兼容更低版本的IE