通过onclick单击事件，实现效果，代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>开关按钮设置</title>

	</head>

	<link rel="stylesheet" href="css/Default style sheet.css" />

	<style>

		div{

		width:120px;

		margin: 0px auto;

		border: 2px solid black;}

		ul{

			display: none;

		}

	</style>

	<script>

		window.onload=function(){

			var odiv=document.getElementById("v");

			var oli=odiv.getElementsByTagName("ul")[0];

	     	var 	onf=true

				odiv.onclick=function(){

					if (onf==true) {

						oli.style.display='block';

						onf=false

					} else{

						oli.style.display='none';

						onf=true

					}

				}

		}

	</script>

	<body>

		<div id="v">

			<h4>你好啊，小老弟</h2>

		<ul>

			<li>come</li>

			<li>on</li>

			<li>do</li>

		</ul>

		</div>

	</body>

</html>

实现效果：

js实现按钮开关.单机下拉菜单的更多相关文章

  1. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  2. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...

  3. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  4. js使用面向对象编写下拉菜单

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  6. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  7. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  8. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

随机推荐

  1. 2、Storm中的一些概念理解

    1.Tuple,Value,Field Tuple官方解释: "A tuple is a named of values where each value can be any type.& ...

  2. 【Diary】期中考+春游记

    4.22-4.24 期中考 周一 早上 赶来三楼电教厅自习,疯狂复习历史.想到下午考语文历史两大文科,不由得有点慌吧. 突然,沙雕体委说了一句: 下午考政治,你不背诵吗 下午 语文感觉正常发挥. 政治 ...

  3. Linux 链路聚合

    Linux 链路聚合 链路聚合与双网卡绑定几乎相同,可以实现多网卡绑定主从荣誉,负载均衡,提高网络访问流量.但链路聚合与双网卡绑定技术(bond)不同点就在于,双网卡绑定只能使用两个网卡绑定,而链路聚 ...

  4. 初涉wheel 组

    入门 在一次处理su切换的问的时候出现一个问题, [cheng1@localhost ~]$ su cheng2 密码: su: 鉴定故障 [cheng1@localhost ~]$ 试过很多次, 也 ...

  5. 正则表达式，js里的正则应用

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.好吧已经到凌晨了,其实还是蛮困的,体力不支了,想了想还是把今天任务结束掉吧,为期5天,又重新把JavaScript以及jQuery给大致过了一遍 ...

  6. logstash filter geoip 转换IP为详细地址等内容。

    使用logstash geoip筛选器可以将ip地址解析为更丰富的内容. 结果类似于这样: "geoip": { "city_name": "Ürüm ...

  7. 【SSL Certificates】什么是数字证书（Certificates）？

    本文涉及的相关问题,如果你的问题或需求有与下面所述相似之处,请阅读本文 ssl certificate 什么是ssl certificates? SSL Certificates 是一种使用数字加密技 ...

  8. 20165306 Exp2 后门原理与实践

    20165306 Exp2 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF mete ...

  9. Java的异常机制

    Java的异常机制 (一)异常的概念 异常是指程序在编译或运行时出现的导致程序不能继续编译或运行的状况.. (二)Throwable类 Throwable类继承自Object类,是Java中所有错误或 ...

  10. 微信小程序开发——简记

    MVVM:提倡渲染(页面)和逻辑分离.页面(DOM),逻辑(后端代码JS等)—> JS操纵DOM.通过模板引擎,操纵和表现. 页面与程序,如何配合工作: 微信客户端会根据page.json配置, ...