JS例子（子菜单下拉）

<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:1000px;
      height:50px;
	  margin-top:100px;}
.zong{ width:500px;
       height:50px;
	   text-align:center;
	   line-height:50px;
	   vertical-align:middle;
	   float:left;
	   border:1px solid #F00;}
.zi{ width:0px;
      height:0px;
	  float:left;}
.ziwai{ width:500px;
        height:152px;
		border:1px solid #F00;
		position:relative;
		top:51px;
		left:-502px;
		}
.se{ width:500px;
     height:50px;
	 text-align:center;
	 line-height:50px;
	 vertical-align:middle;
	 border-bottom:1px solid #F00;
	 }

</style>

<body>

       <div id="wai">
           <div class="zong" onmousemove="xian(‘yanse‘)" onmouseout="yin(‘yanse‘)">颜色</div>
               <div class="zi">
                 <div class="ziwai" id="ziwai" onmousemove="shi(this)" onmouseout="cang(this)">
                    <div class="se">红</div>
                    <div class="se">黄</div>
                    <div class="se">绿</div>
                 </div>
               </div>

     </div>

</body>

<script type="text/javascript">
function xian(yanse){
	var a = document.getElementById("ziwai");
	a.style.display = "block";
}

function yin(yanse){
	var b = document.getElementById("ziwai");
	b.style.display = "none";
}

function shi(c){
	c.style.display = "block";
}
function cang(d){
	d.style.display = "none";
}
</script>

时间： 2024-10-07 19:29:32

JS例子（子菜单下拉）的相关文章

子菜单下拉

9月23日子菜单下拉

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

js实现点击下拉框选中对应的div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现点击下拉框选中对应的div</title> <style type="text/css"> div{display:none;} </style> </head> <body> <select name="

JS年月日三级联动下拉框日期选择代码

原博客网址: http://www.cnblogs.com/gdcgy/p/5467742.html 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

原生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禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal