面试遇到的问题。用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实现点击下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  3. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  4. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  5. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. css用hover制作下拉菜单

    首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...

  7. css实现hover显示下拉菜单

    原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...

  8. 怎样用css写出一个下拉菜单

    <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...

  9. 一个用css写出来的下拉菜单

    1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...

随机推荐

  1. perl 常用命令

    过滤重复字符 perl -e '$_=<STDIN>; @in = split; if (@in < 100){ @out = grep {! $hash{$_}++ } @in;  ...

  2. ftp 服务器搭建

    一.安装 yum -y install vsftpd //通过yum来安装vsftpd chkconfig vsftpd on //设置为开机启动 vi /etc/vsftpd/vsftpd.conf ...

  3. Uboot mmc命令解析&NAND flash uboot命令详解

    转载:http://blog.csdn.net/simonjay2007/article/details/43198353 一:mmc的命令如下: 1:对mmc读操作 mmc read addr bl ...

  4. PAT 1059 Prime Factors[难]

    1059 Prime Factors (25 分) Given any positive integer N, you are supposed to find all of its prime fa ...

  5. Jmeter 之下载图片

    利用Jmeter实现文件图片下载 步骤: 1. 新建线程组 2. 线程组右键新建HTTP请求: 添加服务器名称或IP, 路径,协议,方法,端口等信息 3. 线程组右键新建 BeanShell Samp ...

  6. 微信小程序组件toast

    操作反馈toast:官方文档 Demo Code: var toastNum = 2 var pageData = {} pageData.data = {} for(var i = 0; i < ...

  7. 走近AbstractQueuedSynchronizer

    走近AbstractQueuedSynchronizer 一.从类结构开始 Java并发包中的同步器是很多并发组件的基础,如各种Lock,ConcurrentHashMap中的Segment,阻塞队列 ...

  8. laravel request 增加字段

    https://segmentfault.com/q/1010000006898668 $input = $request->only(['username', 'password']); // ...

  9. [原创]css中a标签去掉锚点文本下划线

    我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 1.问题解决方式: 设置属性:text-decoration:none; 2.更多属性参数参考 text-decorati ...

  10. 照着官网来安装openstack pike之environment设置

    安装openstack前的准备环境: 两个centos7系统的环境:192.168.101.10 node1,192.168.101.11 node2 控制节点node1,计算节点node2 1.统一 ...