面试遇到的问题。用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. GNU Screen使用入门

    前些天开始学习使用GNU Screen程序,发现这个工具在管理服务器时候确实挺方便的,于是写一篇文章总结一下,顺便介绍Screen的基本使用方法. 简介 GNU Screen是 一个基于文本的全屏窗口 ...

  2. K-modes聚类算法MATLAB

    K-modes算法主要用于分类数据,如 国籍,性别等特征. 距离使用汉明距离,即有多少对应特征不同则距离为几. 中心点计算为,选择众数作为中心点. 主要功能: 随机初始化聚类中心,计算聚类. 选择每次 ...

  3. MySQL基础命令

    目录: MySQL概述 安装及启动登陆mysql操作 MySQL基本数据类型 MySQL数据库基本SQL操作 MySQL高级SQL操作 一.MySQL概述 1.什么是数据库? 数据库(Database ...

  4. Java内存解析 程序的执行过程

    Java内存解析 栈.堆.常量池等虽同属Java内存分配时操作的区域,但其适用范围和功用却大不相同.本文将深入Java核心,简单讲解Java内存分配方面的知识. 首先我们先来讲解一下内存中的各个区域. ...

  5. jenkins SSH登录 Git配置（通过eclipse生成SSH 密钥）

    1.通过eclipse生成SSH 密钥 菜单栏的windows-->preferences-->General-->Network Connections-->SSH2--&g ...

  6. testng生成报告 testng-xslt 美化测试报告

    testng生成报告 testng-xslt 美化测试报告 testng生成报告 testng-xslt 美化测试报告 用TestNG测试后,自动会生成html的测试报告.利用 testNG-xslt ...

  7. VUE 2.0在IE中打开页面空白的原因及解决方法

    前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie打开出现了bug: 问题 ie打开vue2.0项目空白,控制台报 ...

  8. Java基础知识陷阱(二)

    本文发表于本人博客. 上次说了一些关于字符串的知识,都是比较基础的,那这次也说下关于对象地址问题,比如传参.先看下面代码: public void changeInt(int a){ a = ; } ...

  9. Windows资源监控神器——perfmon

    一.简述 笔者在用lr中control监控Windows资源的时候,有时候总是遇到卡死和报错,所以就发现了Windows自带的监控神器————perfmon. Perfmon提供了图表化的系统性能实时 ...

  10. Redhat 7.4更新为Centos7的yum并安装docker-ce

    以下命令请在root下执行 #删除原有的yum rpm -qa|grep yum|xargs rpm -e --nodeps #install centos yum #wget http://mirr ...