通过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. latch

    signal definition sequence:

  2. Thinking in work

    Scheduler? Realtime? sure SCI? Power supply and ECU life. how to assure? EMC?

  3. 评价指标整理：Precision, Recall, F-score, TPR, FPR, TNR, FNR, AUC, Accuracy

    针对二分类的结果,对模型进行评估,通常有以下几种方法: Precision.Recall.F-score(F1-measure)TPR.FPR.TNR.FNR.AUCAccuracy   真实结果 1 ...

  4. Python网络爬虫入门篇

    1.  预备知识 学习者需要预先掌握Python的数字类型.字符串类型.分支.循环.函数.列表类型.字典类型.文件和第三方库使用等概念和编程方法. 2. Python爬虫基本流程 a. 发送请求 使用 ...

  5. SAP如何修改表的数据

     修改表: 事务代码:se16n  输入表名字   输入 /h 进入维护模式  修改 GD-EDIT 和 GD-SAPEDIT  内容为大写X.                          se ...

  6. Django 中使用 Celery

    起步 在 <分布式任务队列Celery使用说明> 中介绍了在 Python 中使用 Celery 来实验异步任务和定时任务功能.本文介绍如何在 Django 中使用 Celery. 安装 ...

  7. PHP算法练习1:两数之和

    leetcode地址:https://leetcode-cn.com/problems/two-sum/description/ 题目: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. ...

  8. 解决来自美国IP的攻击过程

    1.因为最近接口文档confluence服务总是自动关闭.   解决方法: 1.查看阿里云上的报警提示,看到来自外国的Ip的攻击.这时我选择把攻击的IP加入黑名单. 加入黑名单的方法:https:// ...

  9. Eclipse下运行maven项目失败且Tomcat服务器也启动不了

    今天遇到一个神奇的问题,在eclipse中创建一个maven项目后,Run on server 时说服务器启动失败.我以为是Eclipse配置tomcat的问题.找了一大堆没找到想要的答案!!! 我还 ...

  10. Cordova入门系列（一）创建项目

    Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的,原理是什么.经常会有这样的困惑: 它是一个可 ...