纯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 ...
随机推荐
- js-day05-JSON-jQuery初体验
JSON数据格式 JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)JSON是JavaSc ...
- SSIS - 9.文件系统任务
文件系统任务是用来操作服务器上的文件和目录的.比如,可以新建任务来创建.复制.删除或移动一个文件或一个目录. 一.操作和属性 一个文件系统可以定义如下10种操作. 所有的操作包含Name, Descr ...
- android利用ContentResolver访问者获取手机联系人信息
转载自:http://www.jb51.net/article/106379.htm 首先需要在AndroidManifest.xml文件中添加权限: <uses-permission andr ...
- C# 窗体打开拖动到窗体的文件
private void Form3_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats ...
- 【安富莱专题教程第7期】终极调试组件Event Recorder，各种Link通吃，支持时间和功耗测量，printf打印，RTX5及中间件调试
说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃. ...
- 剑指Offer全解
二维数组中的查找 描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中 ...
- Kubernetes---Pod控制器
Pod作为kubernetes的最基本单元,它的控制器有以下这些 Pod的控制器: 1, RC ( ReplicationController): 2, RS(ReplicaSet) : 3, De ...
- React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题
首先 导航链接应该使用 NavLink 而不再是 Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...
- Python 字典和集合基于哈希表实现
哈希表作为基础数据结构我不多说,有兴趣的可以百度,或者等我出一篇博客来细谈哈希表.我这里就简单讲讲:哈希表不过就是一个定长数组,元素找位置,遇到哈希冲突则利用 hash 算法解决找另一个位置,如果数组 ...
- Unix程序员的Win10二三事
macOS延续自BSD Unix, Linux则是从内核开始重新编写但延续Unix使用方式的Unix.所以mac还有linux程序员,一般都算是*nix程序员,尽管其中还有不少的区别. Windows ...