一个JS点击显示隐藏层的问题,望高手帮帮忙,非常感谢!
时间:2010-05-15
来源:互联网
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <a href="javascript:;" id="Link">Test</a> <div id="T" style="width:100px; height:100px; background:#F0F; display:none;"></div> </body> </html> <script type="text/javascript"> function $(obj){return document.getElementById(obj)} $("Link").attachEvent("onclick",show) function show(){ $("T").style.display="block"; } </script>
提示:您可以先修改部分代码再运行
现在点击"Test"能把那个层显示出来,我想在点击层和Test的时候不隐藏,但是点击Test以及层之外的地方能隐藏那个层提示:您可以先修改部分代码再运行
其实就是像Google(http://www.google.com.hk )点击顶部的那个"更多"的效果,点击一下出现子菜单,再在网页的其它地方点击,子菜单就隐藏了.
[ 本帖最后由 lrj0611 于 2010-5-15 14:44 编辑 ]
作者: lrj0611 发布时间: 2010-05-15
关注一下,淘宝有啊店铺街,就是看看,然后顶起来吧
作者: 383888160 发布时间: 2010-05-15
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <a href="javascript:;" id="Link">Test</a> <div id="T" style="width:100px; height:100px; background:#F0F; display:none;"></div> <script type="text/javascript"> function $(obj){return document.getElementById(obj)} $("Link").onclick=function(){ $("T").style.display=$("T").style.display=="block"?"none":"block";} document.onclick=function(e){ e=window.event||e; obj = e.srcElement ? e.srcElement : e.target; if(obj.id!="Link"){ $("T").style.display="none"; } } </script> </body> </html>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
作者: YstarLongzi 发布时间: 2010-05-15
引用:
原帖由 383888160 于 2010-5-15 18:00 发表关注一下,淘宝有啊店铺街,就是看看,然后顶起来吧
小心斑竹删你ID,封你IP!

作者: YstarLongzi 发布时间: 2010-05-15
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <a href="javascript:;" id="Link">Test</a> <div id="T" style="width:100px; height:100px; background:#F0F; display:none;"></div> <script type="text/javascript"> (function (title,body){ ldh=function (el){return typeof el=="string"?document.getElementById(el):el}; ldh.on=function on(el,type,fn){ el=this(el);el.attachEvent? el.attachEvent('on'+type,function(){fn.call(el,event)}): el.addEventListener(type,fn,false);return this }; ldh.stop=function (e){ e.stopPropagation&&e.stopPropagation(); e.cancelBubble=true }; ldh.on(body,'click',function (e){ ldh.stop(e) }).on(document, 'click',function(e) { ldh(body).style.display='none' }).on(title,'click',function (e){ ldh(body).style.display=''; ldh.stop(e) }) })('Link','T'); </script> </body> </html>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
作者: kfguoguo 发布时间: 2010-05-15
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28