面试遇到的问题。用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. 基于Maven的SSM框架搭建

    Maven + Spring + Spring MVC + Mybatis + MySQL整合SSM框架 1.数据库准备 本文主要想实现SSM框架的搭建,并基于该框架实现简单的登录功能,那么先新建一张 ...

  2. rabbitMQ基本概念

    一.网页登录方法 http://127.0.0.1:15672/ 用户名和密码默认为guest/guest 用java代码去连接rabbitmq用的端口是5672 二.rabbitMQ基本概念 Rab ...

  3. excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

    前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数 选中需要显示结果的单元格,假设我们要判断第一行第一列的单元格A1是否含有“ ...

  4. mysql监控优化（三）慢查询

    顾名思义,慢查询日志中记录的是执行时间较长的query,也就是我们常说的slowquery,通过设--log-slow-queries[=file_name]来打开该功能并设置记录位置和文件名.慢查询 ...

  5. POJ2480:Longge's problem（欧拉函数的应用）

    题目链接:传送门 题目需求: Given an integer N(1 < N < 2^31),you are to calculate ∑gcd(i, N) 1<=i <=N ...

  6. 在 Sublime Text 2 中编译和运行 Java 程序，以及输出中文出错问题解决办法

    Sublime Text 2 是我最喜欢用来编码的文本编辑器,如果你尝试使用后相信你也会喜欢上它的.在这篇文章中我们将讨论如何在 Sublime Text 2 中编译和运行 Java 程序. 第一步: ...

  7. CentOS 7 安装vsftpd 服务器

    在CentOS7上安装ftp服务器用于保存服务端上传的图片. 1.CentOS卸载vsftpd的方法 如果服务器上已经安装了vsftpd服务,配置出错需要卸载vsftpd服务. 1.1 查找vsftp ...

  8. MySQL 参数

    I see a lot of people filtering replication with binlog-do-db, binlog-ignore-db, replicate-do-db, an ...

  9. matlab手写神经网络实现识别手写数字

    实验说明 一直想自己写一个神经网络来实现手写数字的识别,而不是套用别人的框架.恰巧前几天,有幸从同学那拿到5000张已经贴好标签的手写数字图片,于是我就尝试用matlab写一个网络. 实验数据:500 ...

  10. GoDaddy用支付宝付款时出现我们无法处理这笔交易，请查看您的付款信息并重试。

    一.GoDaddy操作流程 在GoDaddy上购买及注册域名的操作步骤,请参考https://www.jianshu.com/p/05289a4bc8b2进行操作. 二.我遇到的问题 今天用GoDad ...