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

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯js实现的小代码段。我这里整理了纯css实现方式，给需要的人和给自己做个笔记：

实现原理利用css伪类:target

1

2

3

4

5

纯css实现点击事件展现隐藏div菜单列表

6

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

45

46

47

48

49 三

50 x

51

我是菜单列表

52

53

54

可以配合css3过渡做出很多不同的效果，具体不做详细演示

效果没有js那么完美，毕竟地址栏会出现你的锚点信息，当然这是比较小的瑕疵，好处应该是轻量吧。。

另外使用:first-child(css2)作为选择器仅为了兼容更低版本的ie