+ -
当前位置:首页 → 问答吧 → 一个JS点击显示隐藏层的问题,望高手帮帮忙,非常感谢!

一个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