通过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. MySQL删除foreign key_ERROR 1025 (HY000): Error on rename of './test_20180206/cc' to './test_20180206/#sql2-9ac-e' (errno: 152)

    问题背景描述: 首先,创建了一个主表,具有以下数据结构: mysql> describe aa; +-------+----------+------+-----+---------+----- ...

  2. Java8将List转为Map

    1.实体 public class Hosting { private int id; private String name; private long websites; public Hosti ...

  3. Prometheus监控学习笔记之Prometheus的Relabel，SD以及Federation功能

    0x00 k8s 的监控设计 k8s 默认以及推荐的监控体系是它自己的一套东西:Heapster + cAdvisor + Influxdb + Grafana,具体可以看 这里 . 包括 k8s 自 ...

  4. 聊天斗图神器aidou mac中文版

    aidou mac中文版是mac上一款专为斗图设计的聊天斗图神器,让您在聊天的时候不怕没有表情用,炫酷的表情即时更新,让您每时每刻都有新表情用!一键下载的表情包!小编现为您带来aidou斗图神器免费版 ...

  5. Java集合中的细节

    integer数据对比 对于Integer var = ? 在-128至127范围内的赋值,Integer对象是在IntegerCache.cache产生,会复用已有对象,这个区间内的Integer值 ...

  6. golang获取文件的md5

    直接展示代码 func md5sum(filepath string) (string, error) { f, err := os.Open(filepath) if err != nil { st ...

  7. sql*loader以及oracle外部表加载Date类型列

    Oracle sqlldr LOAD DATAINFILE *INTO TABLE testFIELDS TERMINATED BY X'9'TRAILING NULLCOLS(    c2 &quo ...

  8. [Python数据挖掘]第5章、挖掘建模（上）

    一.分类和回归 回归分析研究的范围大致如下: 1.逻辑回归 #逻辑回归 自动建模 import pandas as pd from sklearn.linear_model import Logist ...

  9. sqlite3出现SQLITE_BUSY错误码的原因以及解决方法

    转载:https://www.cnblogs.com/lijingcheng/p/4454884.html 转载:https://blog.csdn.net/venchia_lu/article/de ...

  10. 【BZOJ5194】Snow Boots

    [原题题面]传送门 [简化题意] 给定一个长度为n的序列. 有m次询问,每次询问给定两个数si,di.你一开始站在0,每次你可以走不超过di,但你到达的位置的数不能超过si.问能否走到n+1. n,m ...