面试遇到的问题。用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. LeetCode_Add Two Numbers

    题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...

  2. KVm中EPT逆向映射机制分析

    2017-05-30 前几天简要分析了linux remap机制,虽然还有些许瑕疵,但总算大致分析的比较清楚.今天分析下EPT下的逆向映射机制.EPT具体的工作流程可参考前面博文,本文对于EPT以及其 ...

  3. 前端框架之SweetAlert

    简介 SweetAlert是一款很好用的弹出框框架 下载 点我下载 导入 博主用的是bootstrap-sweetalert,所以要依赖bootstrap,导入前先导入原生jQuery以及bootst ...

  4. java 多线程 day07 多线程共享数据

    /** * Created by chengtao on 17/12/3. * 多个线程 如何共享数据? * 常见实例:多个窗口同时售卖火车票 */public class Thread0701_Mu ...

  5. karma安装

    Last login: Sat Jun :: on ttys000 ➜ ~ cd /Users/wangyizhe/Projects/work/smartcmp/services/new-yacmp/ ...

  6. Android Studio Tips

    1. 可以通过ctrl+shift+a,然后输入reformat,就能看到对应的快捷键. 如果记不得快捷键了,都可以通过ctrl+shift+a来查找. 2. [Androidstudio]的坑之[@ ...

  7. mysql数据库从删库到跑路之mysql数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...

  8. Kafka（一）

    1.安装zookeeper集群 2.下载kafka    wget http://mirror.bit.edu.cn/apache/kafka/1.0.0/kafka_2.11-1.0.0.tgz 配 ...

  9. 50条常用liunx命令整理

    1.pwd命令 :确定自己在那个目录 使用方法:在liunx命令输入框里面输入pwd,自动就会显示出自己现在在那个目录下 操作截图: 此时正处在root目录里面 2.cd命令:切换目录的意思 使用方法 ...

  10. linux 性能测试工具Lmbench

    Lmbench是一套简易,可移植的,符合ANSI/C标准为UNIX/POSIX而制定的微型测评工具.一般来说,它衡量两个关键特征:反应时间和带宽.Lmbench旨在使系统开发者深入了解关键操作的基础成 ...