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

电玩女神 2022-09-02 14:51 296阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，296人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 192 阅读

相关监听菜单列表点击事件

</pre>menu:<pre class="html" name="code"><menu xmlns:android="http://schemas.android

àì夳堔傛蜴生んèń/ 2022年09月23日 09:28/ 0 赞/ 210 阅读

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

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

电玩女神/ 2022年09月02日 14:51/ 0 赞/ 297 阅读

相关点击其他区域时隐藏元素

效果说明，除了当前区域外，点击其他任何地方，都会让当前元素区域隐藏。思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不

不念不忘少年蓝@/ 2022年06月05日 01:26/ 0 赞/ 284 阅读

相关 jquery实现点击某元素之外触发事件

　　jq如何实现这个功能呢？其实也不难，大概思路就是，在document上面绑定一个事件，当用户触发document的事件时，判断一下目标元素是什么，然后再执行相应的操作就行了

川长思鸟来/ 2022年05月04日 08:30/ 0 赞/ 672 阅读

相关点击子元素却也触发父元素的点击事件

> 在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较

╰半橙微兮°/ 2022年03月17日 12:44/ 0 赞/ 642 阅读

相关 jquery点击隐藏展现（hide,show）事件附错误解析

第一：绝对不要漏看`.title div`只有div才能触发第二：绝对不要忽视`class="station"`只有class才会有hide和show <!DO

女爷i/ 2022年02月16日 17:01/ 0 赞/ 294 阅读

相关点击切换div 的隐藏与显示

点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html> <head> <me

末蓝、/ 2022年01月29日 12:55/ 0 赞/ 452 阅读

相关阻止上层div触发点击事件，并触发下层div的点击事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

拼搏现实的明天。/ 2021年09月23日 13:48/ 0 赞/ 957 阅读

相关 JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。![2016

心已赠人/ 2021年06月10日 20:41/ 0 赞/ 709 阅读