IDC资讯中心
当层遇到下拉框时总是挡不了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" onclick="cal_hideelementall(this)">
点击让select隐藏
</div>
<br><br><br><br><br><br>
<input type="button" value="点击让select显示" onclick="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 onclick=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.offsetwidth
ifm.style.height=div1.offsetheight
ifm.name=ifm.uniqueid
div1.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=x
pixeltop=y
visibility=
}
}
function hide(){
document.all.div1.style.visibility=hidden
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br><select></select>
<div id=div1 onmouseover="style.visibility=" onmouseout="style.visibility=hidden" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundcolor=highlight" onmouseout="style.backgroundcolor=" onclick="window.open(href)">中国程序员</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundcolor=highlight" onmouseout="style.backgroundcolor=" onclick="window.open(href)">sohu</div>
</div>
</body>
</html>
