这是段js下拉菜单隐藏和显示的代码，有些地方不太明白，请给解释一下。

JavaScript025

这是段js下拉菜单隐藏和显示的代码，有些地方不太明白，请给解释一下。,第1张

这个也不复杂，不过感觉你的这个代码并不好的样子。

//根据id获取对象

function

$(id)

{

return

document.getElementById(id)

}

function

showMenu(baseID,divID)

{

baseID=$(baseID)

divID=$(divID)

if(showMenu.timer)clearTimeout(showMenu.timer)//清楚定时器

hideCur()//隐藏上个菜单

divID.style.display='block'//显示当前菜单

showMenu.cur=divID//保存当前菜单对象

if(!divID.isCreate)

{//该菜单没创建标志则设置为已创建

divID.isCreate=true

//divID.timer

=

0

divID.onmouseover=function

()

{//鼠标放在菜单上时显示

if(showMenu.timer)clearTimeout(showMenu.timer)

hideCur()

divID.style.display='block'

}

function

hide()

{//鼠标离开菜单1秒后隐藏菜单

showMenu.timer=setTimeout(function

()

{

divID.style.display='none'

},1000)

}

divID.onmouseout=hide

baseID.onmouseout=hide

}

function

hideCur()

{//隐藏上个菜单

showMenu.cur&&(showMenu.cur.style.display='none')

}

}

可能是事件用错了：用onmouseout

子菜单隐藏:document.getElementById("子项ID").style.display="none"

加一起就是onmouseout="document.getElementById('子项ID').style.display='none'"

思路：利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下：

1、HTML结构

<select id="test_select">

<option value="1">显示</option>

<option value="2">隐藏</option>

</select>

<div id="test">我是一个div么呀我是一个div</div>

2、javascript代码

window.onload = function(){

var obj_select = document.getElementById("test_select")

var obj_div = document.getElementById("test")

obj_select.onchange = function(){

obj_div.style.display = this.value==1? "block" : "none"

}

}

3、效果演示