纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯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
纯CSS实现点击事件展现隐藏div菜单列表/元素切换的更多相关文章
- 纯css实现点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- CSS实现点击事件及实践
实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 纯CSS手动滑动轮播图（隐藏滚动条）
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- css 禁止点击事件触发
鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none
- jquery点击其他地方隐藏div层的实现程序
js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...
随机推荐
- UEditor之实现配置简单的图片上传示例
UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...
- freemarker导出带图片的word文档
最近做一个关于文档导出功能, 顺便学习了下freemarker,做了个关于导出带图片的word文档,模板并没有写全,只是验证代码的正确性 这只是做一个小功能,故只做了后台代码关于导出的代码,并未与前台 ...
- 东软实习<2>
学习过程及小节 Jdk在linux上的安装解压配置 Mysql的安装 配置 Tomcat的安装 配置 管理 SSH的安装 Notepad的连接与使用 对四大作用域及其范围进行了介绍 讲解了有关负载均衡 ...
- Java Web每天学之Servlet的原理解析
Java Web每天学之Servlet的工作原理解析,上海尚学堂Java技术文章Java Web系列之二上一篇文章Java Web每天学之Servlet的工作原理解析是之一,欢迎点击阅读. Servl ...
- Pycharm中配置鼠标悬停快速提示方法参数
第一步: 第二步: 演示:
- [Swift]LeetCode57. 插入区间 | Insert Interval
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- hive中beeline取回数据的完整流程
这里我们从BeeLine.execute讲起. 接下来来到BeeLine.dispatch,这里的入参就是sql语句.方法的最后调用了Commands.sql,然后调用到了Commands.execu ...
- Spring中的IOC_源码_随笔
Spring ioc 叫控制反转,也就是把创建Bean的动作交给Spring去完成. spring ioc 流程大致为 定位-> 加载->注册 先说几个比较有意思的点 1.Spring中 ...
- Linux 文件夹压缩命令总结
tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...
- 关闭mac的SIP + 一定有用的删除mac自带ABC的方法
如果你被这ABC输入法弄得很是不开心.那就看看吧!!!亲测一定有效. mac 关闭系统完整性保护 SIP(System Integrity Protection) 重启系统 按住 command+R ...