怎么使div显示在下拉框qianmian_IT百科

[转载]当层遇到下拉框(select)框时的解决方法

原作者：不详

当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.

1.最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

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=0i<window.document.all.tags(strElementTagName).lengthi++){

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=0i<HideElementTemp.lengthi++){

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隐藏

</div>

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.

2.Object对象的优先度较高,可以挡住select框

<select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法

3.用iframe作载体

以下是一简单的例子:

<html>

<head>

<!--

提供定位函数，用iframe作载体，不会被select挡住

-->

#div1{

position:absolute

z-index:100

width:100

height:130

background-color:#d2e8ff

border:1 solid black

}

div{cursor:handfont-size:12px}

a{text-decoration:nonecolor:redfont-size:12px}

</style>

</head>

<body>

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>

<div href="http://www.webjx.com" onmouseover="style.backgroundColor=’highlight’" onmouseout="style.backgroundColor=’’" onclick="window.open(href)">webjx</div>

</div>

</body>

</html>

var $optList = $('.page04_01_form_select_list')

var $arrowBtn = $('.page04_01_form_select_but,.page04_01_form_select_input>span') //下拉按钮和选项框

$arrowBtn.click(function(){

// 这里假设展开状态是listdown，收起状态是listup

var $this = $(this)

if($this.hasClass('listup')){

listDown()

}else{

listUp()

}

})

$optList.on('click', '>div', function(){

$optList.prev().text($(this).text())

listUp()

})

function listDown(){

$optList.show()

$arrowBtn.removeClass('listup').addClass('listdown')

}

function listUp(){

$optList.hide()

$arrowBtn.removeClass('listdown').addClass('listup')

}

</script>

用div+css的ul、li结合script脚本实现下拉列表菜单，全部代码如下，复制在DW中预览即可看到效果，细节样式可以自行修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIV+CSS实现下拉列表菜单</title>

<!--

ul {

margin: 0px

padding: 0px

list-style-type: none

}

li{

float:left

width:160px

margin-left:1px

}

ul li a{

display:block

font-size:12px

border:#CCCCCC 1px solid

padding:3px

text-decoration:none

color:#777777

margin-top:1px

text-align:center

}

ul li a:hover{

background-color:#0099CC

color:#FFFFFF

}

li ul{

display:none

top:20px

margin-top:1px

}

li:hover ul,li.over ul{

display:block

}

-->

</style>

</head>

startlist = function() {

if （document.all&&document.getElementByIdx) {

navRoot = document.getElementByIdx("nav")

for (i=0i<navRoot.childNodes.lengthi++) {

node = navRoot.childNodes[i]

if (node.nodeName=="li") {

node.onmouseover=function() {

this.className+=" over"

}

node.onmouseout=function() {

this.className=this.className.replace(" over","")

}

window.onload=startlist

//--><!]]></script>

</script>

<body>

<ul >

<ul>

<li><a href="">Flash 教程</a></li>

</ul>

</li>

<ul>

<li><a href="">XHTML</a></li>

</ul>

</li>

<ul>

<li><a href="">Flash 技术</a></li>

</ul>

</li>

<ul>

<li><a href="">Flash 技术</a></li>

</ul>

</li>

</ul>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11909710.html

怎么使div显示在下拉框qianmian

发表评论

评论列表（0条）