在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯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菜单列表/元素切换的更多相关文章

  1. 纯css实现点击事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  3. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  5. CSS实现点击事件及实践

    实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...

  6. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  7. 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  8. css 禁止点击事件触发

    鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none

  9. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

随机推荐

  1. 别以为真懂Openstack: 虚拟机创建的50个步骤和100个知识点(4)

    六.Libvirt 对于Libvirt,在启动虚拟机之前,首先需要define虚拟机,是一个XML格式的文件 列出所有的Instance # virsh list Id    Name         ...

  2. 我们为什么要搞长沙.NET技术社区(三)

    我们为什么要搞长沙.NET技术社区(三) 万事先从饭局开始是中华民族留下来的一个优秀的传统美德. 昨天晚餐时间,长沙 .net 技术社区的主要发起人员进行了一番小聚,同时也作为一个非正式会议,对社区发 ...

  3. 【转载】C++ ,C#数据类型对照

    C++            C#=====================================WORD            ushortDWORD            uintUCH ...

  4. 北大开源全新中文分词工具包:准确率远超THULAC、结巴分词

    最近,北大开源了一个中文分词工具包,它在多个分词数据集上都有非常高的分词准确率.其中广泛使用的结巴分词误差率高达 18.55% 和 20.42,而北大的 pkuseg 只有 3.25% 与 4.32% ...

  5. [Swift]LeetCode710. 黑名单中的随机数 | Random Pick with Blacklist

    Given a blacklist B containing unique integers from [0, N), write a function to return a uniform ran ...

  6. C/C++读写二进制文件

    C++读写二进制文件 最近在给android层提供支持,因此代码都是用标准库库函数写出来的,好多windows和第三方的库不能或者很难使用,下面有我在读写二进制文件时候的一些心得,也算是一种总结吧 1 ...

  7. 使用ML.NET预测纽约出租车费

    有了上一篇<.NET Core玩转机器学习>打基础,这一次我们以纽约出租车费的预测做为新的场景案例,来体验一下回归模型. 场景概述 我们的目标是预测纽约的出租车费,乍一看似乎仅仅取决于行程 ...

  8. Python爬虫入门教程 30-100 高考派大学数据抓取 scrapy

    1. 高考派大学数据----写在前面 终于写到了scrapy爬虫框架了,这个框架可以说是python爬虫框架里面出镜率最高的一个了,我们接下来重点研究一下它的使用规则. 安装过程自己百度一下,就能找到 ...

  9. 前端笔记之JavaScript(十二)缓冲公式&检测设备&Data日期

    一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px ...

  10. xxl-job入门实践

    源码在码云上(git@gitee.com:lynch168/spring-boot.git) 1.下载xxl-job源码 xxl-job源码地址:https://github.com/xuxueli/ ...