纯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 ...
随机推荐
- 依赖注入[4]: 创建一个简易版的DI框架[上篇]
本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(<控制反转>.<基于IoC的设计模式>和< 依赖注入模式>)从纯理论的角度 ...
- 利用RTL2832u电视棒芯片追踪民航飞机轨迹
我国民航飞机通讯的频率为1090Mhz,而rtl2832u电视棒芯片可以接受的频率范围为24 – 1766 MHz(通过改制Q通道可以接收0-30Mhz的短波)下面开始介绍利用rtl2832u电视棒芯 ...
- 吴恩达机器学习笔记54-开发与评价一个异常检测系统及其与监督学习的对比（Developing and Evaluating an Anomaly Detection System and the Comparison to Supervised Learning）
一.开发与评价一个异常检测系统 异常检测算法是一个非监督学习算法,意味着我们无法根据结果变量
- jquery配合.NET实现点击指定绑定数据并且能够一键下载
最近在做培训管理系统中遇到一个问题,需求需点击绑定的数据,将指定的附件下载下来,并且是批量下载(绑定的数据非datagrid,后台拼接的绑定). 效果图如下: 大体思路: 1.jquery得到选中的绑 ...
- python高级-动态特性(20)
一.动态语⾔的定义 动态语言是在运行时确定数据类型的语言.变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型.现在比较热门的动态语言有:Python.PHP.JavaScript.Obj ...
- Linux自启动执行脚本方法
1. 在/etc/rc.d/init.d/下创建脚本,要遵守service script的标准: 例如: vi /etc/rc.d/init.d/gfs #!/bin/bash#case " ...
- Entitiy Framework Core中使用ChangeTracker持久化实体修改历史
背景介绍 在我们的日常开发中,有时候需要记录数据库表中值的变化, 这时候我们通常会使用触发器或者使用关系型数据库中临时表(Temporal Table)或数据变更捕获(Change Data Capt ...
- properties配置文件读取操作总结【java笔记】
声明:本文所有例子中的 properties 文件均放在 src 目录下,ecclipse 软件自动增加 一.基本概念 1.1 properties文件,存储格式 键=值. properties文件 ...
- 【ASP.NET Core快速入门】（十）Cookie-based认证实现
准备工作 新建MVC项目,然后用VSCode打开 dotnet new mvc --name MvcCookieAuthSample 在Controllers文件夹下新建AdminController ...
- 【WCF系列】（一）为什么我们需要WCF
为什么我们需要WCF 传统分布式软件的架构分析 一个开发需求:社保平台 访问量较大客户端类型/平台多和其他系统交互多快速开发/部署结构复杂(B/S.C/S.桌面.服务…) 传统的实现技术: 业界需要一 ...