当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.
1.最直接的方法:隐藏下拉框.
下面提供的是一个比较通用的一组函数:
test.htm
------------
<script>var HideElementTemp = new Array();//点击菜单时，调用此的函数,菜单对象function cal_hideElementAll(obj){ cal_HideElement("IMG",obj); cal_HideElement("SELECT",obj); cal_HideElement("OBJECT",obj); cal_HideElement("IFRAME",obj);}function cal_HideElement(strElementTagName,obj){try{ var showDivElement = obj; var calendarDiv = obj; var intDivLeft = cal_GetOffsetLeft(showDivElement); var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight; //HideElementTemp=new Array() for(i=0;i<window.document.all.tags(strElementTagName).length; i++){ var objTemp = window.document.all.tags(strElementTagName)[i]; if(!objTemp||!objTemp.offsetParent) continue; var intObjLeft=cal_GetOffsetLeft(objTemp); var intObjTop=cal_GetOffsetTop(objTemp); if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&& (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&& (intObjTop+objTemp.clientHeight>intDivTop)&& (intObjTop<intDivTop+calendarDiv.style.posHeight)){ //var intTempIndex=HideElementTemp.length;//已经有的长度 //save elementTagName is stutas //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility); HideElementTemp[HideElementTemp.length]=objTemp objTemp.style.visibility="hidden"; } }}catch(e){alert(e.message)}}
function cal_ShowElement(){ var i; for(i=0;i<HideElementTemp.length; i++){ var objTemp = HideElementTemp[i] if(!objTemp||!objTemp.offsetParent) continue; objTemp.style.visibility='' } HideElementTemp=new Array();}function cal_GetOffsetLeft(src){ var set=0; if(src && src.name!="divMain"){ if (src.offsetParent){ set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent); } if(src.tagName.toUpperCase()!="BODY"){ var x=parseInt(src.scrollLeft,10); if(!isNaN(x)) set-=x; } } return set;}
function cal_GetOffsetTop(src){ var set=0; if(src && src.name!="divMain"){ if (src.offsetParent){ set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent); } if(src.tagName.toUpperCase()!="BODY"){ var y=parseInt(src.scrollTop,10); if(!isNaN(y)) set-=y; } } return set;}
</script><select></select><select></select><div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" οnclick="cal_hideElementAll(this)">点击让select隐藏</div><br><br><br><br><br><br><input type="button" value="点击让select显示" οnclick="cal_ShowElement()">
以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.
2.Object对象的优先度较高,可以挡住select框
<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT><select><option>hellohellohellohello</select><button οnclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>
这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法
3.用iframe作载体
以下是一简单的例子:
-----------
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>简单菜单</title><!--提供定位函数，用iframe作载体，不会被select挡住By Fason(2003-5-21)--><style id=s>#div1{position:absolute;z-index:100;width:100;height:130;background-color:#d2e8ff;border:1 solid black;}div{cursor:hand;font-size:12px;}a{text-decoration:none;color:red;font-size:12px}</style></head><body><script>function window.onload(){var shtml=div1.innerHTML;var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")ifm.style.width=div1.offsetWidthifm.style.height=div1.offsetHeightifm.name=ifm.uniqueIDdiv1.innerHTML=""div1.appendChild(ifm)window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")}
function show(){with(document.all.img1){x=offsetLeft;y=offsetTop;objParent=offsetParent;while(objParent.tagName.toUpperCase()!= "BODY"){x+=objParent.offsetLeft;y+=objParent.offsetTop;objParent = objParent.offsetParent;}y+=offsetHeight-1}with(document.all.div1.style){pixelLeft=xpixelTop=yvisibility=''}}function hide(){document.all.div1.style.visibility='hidden'}</script><img id=img1 οnmοuseοver="show()" οnmοuseοut="hide()" src="ie.gif"><br><select></select><div id=div1 οnmοuseοver="style.visibility=''" οnmοuseοut="style.visibility='hidden'" style="visibility:hidden;"><div href="http://www.csdn.net" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''" οnclick="window.open(href)">中国程序员</div><div href="http://www.sohu.com" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''" οnclick="window.open(href)">sohu</div></div></body></html>
