通过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. MongoDB --- 02. 基本操作,增删改查,数据类型,比较符,高级用法,pymongo

    一.基本操作 . mongod 启动服务端 2. mongo 启动客户端 3. show databses 查看本地磁盘的数据库 4. use 库名 切换到要使用的数据库 5. db 查看当前使用的数 ...

  2. JS(JavaScript）的进一步了解2（更新中···）

    js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二者的区别 基本数据类 ...

  3. windows服务加定时器实现

    首先在项目中添加windows服务 然后双击“MainService.cs”,在上面点右键“打开代码” 以下是我的实例代码 partial class MainService : ServiceBas ...

  4. Appium测试安卓apk遇到的问题及解决方法

    1.Showing error - “Returned value cannot be converted to WebElement: {ELEMENT=1}  解决方法:https://sqa.s ...

  5. jquery.validator 手机号验证

    1.在input中加上mobile="true",maxlength="11" <label class="w170 control-label ...

  6. 从事三年java开发后， 我打算转人工智能

    作为一个2015年参加java培训,2016年计算机科学与技术本科毕业后一直从事java开发的程序员来说, 做出这一步真的不容易, 可是我没赶上java最火的时候,反而渐渐感受到了java的没落, 目 ...

  7. Java将string内容写入到TXT文件

    private static String filePath = "E:\\test.txt"; private static void saveAsFileWriter(Stri ...

  8. Java核心知识盘点（一）- 数据存储

    MySQL 索引使用的注意事项 1.索引的目的:在于提高查询效率,插入和更新的操作,数据库的操作是慢的,但是查询操作会非常快,索引可以对表中一个或多个字段进行加索引动作. 2.索引的类型: 1.唯一索 ...

  9. radio为什么不能选择。急急急

    <div class="control-group"> <label class="control-label" for="&quo ...

  10. LOB

    一,LOB介绍 1,概念 LOB 是指用来存储大对象的数据类型,一般说LOB只是泛指,具体有BLOB,CLOB,NCLOB,BFILE.   根据你数据库的设置,一个LOB可以存储的最大大小从8TB到 ...