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

JavaScript07

这是段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')

}

}

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('button').click(function () {$('#123').css('display', 'block')})。

3、浏览器运行index.html页面,此时点击btn按钮后,div的内容成功被显示了出来。

使用JavaScript控制div的显示隐藏,通常是修改div元素的display为none。

display属性 定义和用法

display 属性规定元素应该生成的框的类型。

display属性 可能的值

JavaScript控制div的隐藏

比如我们有一个id为div1的div元素

<div id="div1"></div>

隐藏,代码如下

document.getElementById("div1").style.display="none"

显示,代码如下

document.getElementById("div1").style.display="block"

其他方式

除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。