纯CSS实现点击事件展现隐藏div菜单列表元素切换
在写移动端导航的时候经常⽤到点击按钮出现/隐藏导航条的情况，最常见的⽅法当然还是前端框架直接调⽤，省⼼省⼒，不易出错；当然还有使⽤纯JS实现的⼩代码段。我这⾥整理了纯CSS实现⽅式，给需要的⼈和给⾃⼰做个笔记：
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。