js实现按钮开关.单机下拉菜单

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

实现效果:

原文地址:https://www.cnblogs.com/web928943/p/9999813.html

时间: 2024-10-05 11:14:58

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

原生js应用setTimeout实现下拉菜单

今天实现一个很简单的下拉菜单的小实例,也就是鼠标移入菜单,它的子菜单出现并延迟消失.大概效果如下图: 来看下布局: <div class="menu" id="menu">主菜单</div> <ul class="mList" id="mList"> <li>下拉菜单一</li> <li>下拉菜单二</li> <li>下拉菜单三&l

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

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

js控件,下拉菜单

要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入框input控件中 制作了该控件的jquery插件,格式采用bootstrap的. 调用方法: input控件写成 <input class="form-control dropdown-toggle" data-toggle="dropdown" id=&quo

js+css实现简单下拉菜单

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体,

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

实现下拉菜单的宽度与登录人ID长度的匹配

{# 通过css添加min-width,通过eval对字符串或表达式进行运算,通过map遍历标签,通过return获得要遍历的内容[固定关键字],#}{# 通过get()获得类数组,通过join进行元素链接. 这个语句:可对标签类进行遍历累加统计,也可对单个ID标签进行统计.#} <!--该JS功能,实现下拉菜单的宽度与登录人ID长度的匹配.--><script> $('.drop-size').css('min-width', eval($('#user_set').map(fu

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">