通过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. Holer服务端软件使用

    用户可以下载 holer-server.zip 搭建自己的Holer服务端. 1. 搭建Holer服务端准备工作 (1) 准备一台Linux系统或者Windows系统主机: (2) 安装Java 1. ...

  2. base64使用

    public static void main(String args[]) throws Exception { InputStream in = null; byte[] data = null; ...

  3. ElasticSearch(八)Elasticsearch-head 连接不上Elasticsearch的原因和解决方案

    在上篇博文里ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务中已经访问到了可视化界面.然后兴奋地进行了数据提交测试,提交啊,刷新啊,就是看不到数据变化,仔细一 ...

  4. iOS日历控件

    项目需要,前一阵子重构了下iPad工程,添加了一个滚动无缝日历. 当时没有头绪,网上找了一个源码改吧改吧就上线了(参考链接),这个功能很多而且流畅性也特别好,推荐不会写的可以参考下. 这几天,活不太忙 ...

  5. 富文本编辑,xss攻击

    富文本编辑 KindEditor 在线HTML编辑器 http://kindeditor.net/doc.php 下载成功,解压放到项目中去 查看官方文档进行操作 xss攻击 XSS攻击全称跨站脚本攻 ...

  6. springBoot整合jpa

    https://blog.csdn.net/qq_35180973/article/details/82316438 总体来讲只是在service调用dao的时候用接口代替dao继承CrudRepos ...

  7. matlab从曲线图提取数据

    同学用肉体一顿饭让我帮他做下这个DDL 样图是一张非常扭曲的三虚线图他甚至想OCR识别x轴y轴坐标单位 上谷歌查了查,对于曲线图提取数据基本上是手动在曲线上取几个点,然后由这个几个点开始遍历领域点,判 ...

  8. java在window下用cmd （javac、jar）命令行模拟Intellij IDEA软件生成jar包

    @@首先最重要的cmd命令: javac ,jar :使用如下(注意[.]不要输错): 1. javac编译: D:\MyWorkSet\idea_hadoop>javac -d .\out\p ...

  9. Android 简单记事本

    写在前面 课程作业需要,于是忙活好几天抄了一个简单的记事本,使用已学内容包括Android UI布局,Activity的跳转,SQLite数据库. 开发环境:Android Studio 参考:htt ...

  10. 压测过程中使用nmon对服务器资源的监控

    1.nmon工具的下载和安装: 官网:http://nmon.sourceforge.net/pmwiki.php 下载完成后进行解压,更改权限:chmod 777 2.查看linux系统的版本,再使 ...