面试遇到的问题。用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. 荣誉墙项目day26 django 项目路由配置

    项目路由配置文件包括:配置目录里的urls.py文件和各个app目录里的urls.py文件 1.include()——从项目主路由分配到各APP主路由 from django.conf.urls im ...

  2. pandas.read_csv() 部分参数解释

    read_csv()所有参数 pandas.read_csv( filepath_or_buffer, sep=',', delimiter=None, header='infer', names=N ...

  3. Flask之flask-migrate

    简介 flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的. 官方文档:http://flask-migrate.readthedocs.io/en/latest/ 使用fl ...

  4. win下如何解决在chrome的同源访问问题

    引子:本来是想验证如果在网页中包含多个框架,那么就会存在两个以上的不同全局环境,如果从一个框架引用另一个框架的数据比如数组a,那么用 instanceof 判断这个数组a是不是另个框架Array的实例 ...

  5. 怎么解决tomcat占用8080端口问题图文教程

     怎么解决tomcat占用8080端口问题 相信很多朋友都遇到过这样的问题吧,tomcat死机了,重启eclipse之后,发现 Several ports (8080, 8009) required ...

  6. DecisionTree

    1.信息增益的定义,也就是互信息 2.信息增益的推导 由公式即可得到信息增益 信息增益存在偏向于选择取值较多的特征的问题,信息增益比可以对这一问题进行修正 3.信息增益比 4.基尼指数,基尼指数越大, ...

  7. hadoop记录(一)

    linux基础和javase基础[包含mysql] 这些是基本功,刚开始也不可能学的很精通,最起码要对linux中的一些基本的命令混个脸熟,后面学习各种框架的时候都会用到,用多了就熟悉了.javase ...

  8. 233. Number of Digit One（统计1出现的次数）

    Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...

  9. POJ - 3308 Paratroopers (最小点权覆盖)

    题意:N*M个格点,K个位置会有敌人.每行每列都有一门炮,能打掉这一行(列)上所有的敌人.每门炮都有其使用价值.总花费是所有使用炮的权值的乘积.求最小的总花费. 若每门炮的权值都是1,就是求最小点覆盖 ...

  10. DataTable转换成IList

    //文章出处: http://www.cnblogs.com/hlxs/archive/2011/05/09/2087976.html DataTable转换成IList 在用C#作开发的时候经常要把 ...