面试遇到的问题。用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. Vuex、axios以及跨域请求处理

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  2. maven 之 web.xml 头设置错误问题

    1.一般开发工具创建web.xml的时候会默认添加web.xml头,而有些插件(例如maven相关插件)默认添加的为 版本和你的开发工具Project facets(项目特性)中设置不同.那么就会导致 ...

  3. Jersey 出现415 MediaType is not supported问题的原因

    前段时间在使用jersey的时候,经常碰到这个问题,一直没有找到真正的原因.找了其他的解决访问,比如使用jackson以及手动转为json再返回给前端. 后续发现问题出在domain对象属性类型和se ...

  4. 0606-Zuul构建API Gateway-Zuul过滤器以及禁用Zuul过滤器

    一.概述 针对Spring Cloud的Zuul配备了许多在代理和服务器模式下默认启用的ZuulFilter bean. 有关启用的可能过滤器,请参阅zuul过滤器包. 二.Zuul过滤器使用 2.1 ...

  5. 20165324 实验二《Java面向对象程序设计》实验报告

    20165324 实验二<Java面向对象程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:何春江 学号:20165324 指导教师:娄嘉鹏 实验日期: ...

  6. vue——学习笔记

    1.vue需要在dom加载完成之后实现实例化 eg: window.onload = function(){ new Vue({ el: '#editor', data: { input: '# he ...

  7. Portal系统中当切换学生时仍旧停留在当前页面的实现方法

    一.BaseController.cs文件 1.OnActionExecuting方法,该方法可以被各子Controller重写 protected override void OnActionExe ...

  8. Web 框架 Flask

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  9. PKU 2002 Squares(二维点哈希+平方求余法+链地址法)

    题目大意:原题链接 给定平面上的N个点,求出这些点一共可以构成多少个正方形. 解题思路: 若正方形为ABCD,A坐标为(x1, y1),B坐标为(x2, y2),则很容易可以推出C和D的坐标.对于特定 ...

  10. 机器学习实战python3 决策树ID3

    代码及数据:https://github.com/zle1992/MachineLearningInAction 决策树 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特 ...