javascript怎样给这个代码加上个定时器让它延时500毫秒显示呢？
<html><head><styletype="text/css">*{margin:0;padding:0;}#div1{position:absolute;}li{l...
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div1{position:absolute;}
li{list-style-type:none;text-align:center;width:70px;height:30px;line-height:30px;}
#zg li{background:blue;float:left;}
#zg li #bj li{background:green;}
#zg li #bj li #xc li{background:red;}
#xc,#sjz{position:relative;left:70px;top:-30px;}
#dc{position:relative;left:70px;top:-60px;}
#bj{display:none;}
#hb{display:none}
#xc{display:none;}
#dc{display:none;}
</style>
<script type="text/javascript">
onload = function ()
{
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++)
{
lis[i].onmouseover = function ()
{
this.children[0] ? this.children[0].style.display = "block" : 0;
}
lis[i].onmouseout = function ()
{
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>北京
<ul id="bj">
<li>西城区
<ul id="xc">
<li>西单</li>
<li>西单</li>
<li>西单</li>
</ul>
</li>
<li>东城区
<ul id="dc">
<li>东单</li>
<li>东单</li>
<li>东单</li>
</ul>
</li>
<li>崇文区</li>
</ul>
</li>
<li>河北
<ul id="hb">
<li>石家庄
<ul id="sjz">
<li>桥东</li>
<li>桥东</li>
<li>桥东</li>
</ul>
</li>
<li>保定</li>
<li>邢台</li>
</ul>
</li>
</ul>
</div>
</body>
</html> 展开
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div1{position:absolute;}
li{list-style-type:none;text-align:center;width:70px;height:30px;line-height:30px;}
#zg li{background:blue;float:left;}
#zg li #bj li{background:green;}
#zg li #bj li #xc li{background:red;}
#xc,#sjz{position:relative;left:70px;top:-30px;}
#dc{position:relative;left:70px;top:-60px;}
#bj{display:none;}
#hb{display:none}
#xc{display:none;}
#dc{display:none;}
</style>
<script type="text/javascript">
onload = function ()
{
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++)
{
lis[i].onmouseover = function ()
{
this.children[0] ? this.children[0].style.display = "block" : 0;
}
lis[i].onmouseout = function ()
{
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>北京
<ul id="bj">
<li>西城区
<ul id="xc">
<li>西单</li>
<li>西单</li>
<li>西单</li>
</ul>
</li>
<li>东城区
<ul id="dc">
<li>东单</li>
<li>东单</li>
<li>东单</li>
</ul>
</li>
<li>崇文区</li>
</ul>
</li>
<li>河北
<ul id="hb">
<li>石家庄
<ul id="sjz">
<li>桥东</li>
<li>桥东</li>
<li>桥东</li>
</ul>
</li>
<li>保定</li>
<li>邢台</li>
</ul>
</li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
使用一个闭包就搞定了
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;} #div1{position:absolute;} li{list-style-type:none;text-align:center;width:70px;height:30px;line-height:30px;}
#zg li{background:blue;float:left;} #zg li #bj li{background:green;} #zg
li #bj li #xc li{background:red;} #xc,#sjz{position:relative;left:70px;top:-30px;}
#dc{position:relative;left:70px;top:-60px;} #bj{display:none;} #hb{display:none}
#xc{display:none;} #dc{display:none;}
</style>
<script type="text/javascript">
onload = function()
{
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function()
{
var p = this;
setTimeout(function() {
return function(parent) {
parent.children[0] ? parent.children[0].style.display = "block": 0;
} (p);
},
500);
}
lis[i].onmouseout = function()
{
this.children[0] ? this.children[0].style.display = "none": 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>
北京
<ul id="bj">
<li>
西城区
<ul id="xc">
<li>
西单
</li>
<li>
西单
</li>
<li>
西单
</li>
</ul>
</li>
<li>
东城区
<ul id="dc">
<li>
东单
</li>
<li>
东单
</li>
<li>
东单
</li>
</ul>
</li>
<li>
崇文区
</li>
</ul>
</li>
<li>
河北
<ul id="hb">
<li>
石家庄
<ul id="sjz">
<li>
桥东
</li>
<li>
桥东
</li>
<li>
桥东
</li>
</ul>
</li>
<li>
保定
</li>
<li>
邢台
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
更多追问追答
追问
这个有bug啊 鼠标移除了不能消失
追答
要对lis[i].onmouseout做多余的判断，才能解决这个BUG，延迟显示会在多个显示的时候出现BUG，这个要自己处理，处理逻辑较复杂。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
