checkbox及css实现点击下拉菜单
面试遇到的问题。用checkbox中的:checked伪类选择器实现。
通过label标签来触发checkbox的unchecked 和checked两种状态；用css普通同胞选择器 ~。另外补充一点，相邻同胞选择器是 +。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.column{
display: none;
}
input[type='checkbox']{
display: none;
}
input[type="checkbox"]:checked ~ ul{
display: block;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="check"/>
<label for="check">标题栏</label>
<ul class="column">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
<li>栏目4</li>
<li>栏目5</li>
</ul>
</div>
</body>
</html>
checkbox及css实现点击下拉菜单的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
- css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...
- 怎样用css写出一个下拉菜单
<style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...
- 一个用css写出来的下拉菜单
1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...
随机推荐
- pytorch中的cat、stack、tranpose、permute、unsqeeze
Cat 对数据沿着某一维度进行拼接.cat后数据的总维数不变. 比如下面代码对两个2维tensor(分别为2*3,1*3)进行拼接,拼接完后变为3*3还是2维的tensor. import torch ...
- gbdt调参的小结
关键部分转自http://www.cnblogs.com/pinard/p/6143927.html 第一次知道网格搜索这个方法,不知道在工业中是不是用这种方式 1.首先从步长和迭代次数入手,选择一个 ...
- matplotlib绘制饼状图
源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...
- Mac打开应用提示已损坏的解决办法
相信很多升级了最新Mac系统的用户在打开一些应用的时候都会出现“应用XX已损坏”的系统提示,安装这些应用的时候总是提示“已损坏,移至废纸篓”这类信息,根本无法打开应用. Mac打开应用提示已损坏的解决 ...
- Python（^^^^^小技巧^^^^^——不定期更新）
偶然想到的小技巧 ''' 交互中对传入函数的参数的数目进行检测 ''' def func(a,b,c): print(a,b,c) s=input(">>>>:&qu ...
- mysql数据库从删库到跑路之mysql:视图、触发器、事务、存储过程、函数
mysql:视图.触发器.事务.存储过程.函数 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果 ...
- 150. Evaluate Reverse Polish Notation(逆波兰表达式)
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- Bar Mitzvah Attack分析
结合RC4算法实现,简单分析一下Bar Mitzvah Attack攻击的原理,并以WEP破解过程来举例说明通用的破解方式.(个人觉得RC4早已经过时,要想避免该攻击,应该采用更好的加密算法,如:cc ...
- 20145316 《Java程序设计》第1周学习总结
20145316 <Java程序设计>第1周学习总结 教材学习内容总结 一.了解java语言: 1.Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言. Java 技术具有卓越的 ...
- i.MX 6Q开发环境配置
#适用于 Ubuntu 14.04 x64 imx6qdl-cubox-i.dtsi #更新系统 sudo apt-get update sudo apt-get upgrade #安装基 ...