当我鼠标划过学习中心 会出现二级菜单 可是当我划过学习中心， 而二级菜单还没有显示完全， 很快把它在移动到别的链接上然后再移回学习中心。而导致二级菜单显示没有完成使得其菜单卡在那里。。请问这个bug 怎么解决啊<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .top-nav { font-size: 14px; font-weight: bold; list-style: none; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { line-height: 34px; text-decoration: none; background: #3f240e; color: #fff; display: block; width: 80px; text-align: center; } .top-nav ul { list-style: none; display: none; padding: 0; position: absolute; height: 0; overflow: hidden; } .top-nav li a:hover { background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x; } .note { color: #3f240e; display: block; background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x; } .corner { display: block; height: 11px; background: url(http://img1.sycdn.imooc.com//5461b5620001410d00170011.jpg) 31px 0 no-repeat; } </style> <script type="text/javascript"> window.onload = function () { //鼠标经过时的效果 var Lis=document.getElementsByTagName("li") ; for(var i=0;i<Lis.length;++i){ Lis[i].onmouseover = function () { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { u.style.display="block"; ChangeH(u.id,1); } } Lis[i].onmouseleave = function () { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { ChangeH(u.id,-1); } } } } function ChangeH(id, count) { // 根据ID找到ulList，同时得到其高度 var ulList = document.getElementById(id); var h = ulList.offsetHeight; h += count; if (count > 0) { if (h <= 42) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH('" + id + "',1)", 10); } else { return; } } else { if (h > 0) { // 将高度赋值给ulList，同时，不断调用本函数 ulList.style.height = h + "px"; setTimeout("ChangeH('" + id + "',-1)", 10); } else { ulList.style.display = "none"; return; } } } </script></head><body> <ul class="top-nav"> <li><a href="#"><span class="note">慕课网</span></a> </li> <li><a href="#">课程大厅</a> </li> <li><a href="#">学习中心</a> <ul id="mnuUL"> <span class="corner"></span> <li><a href="#">前端课程 </a></li> <li><a href="#">手机开发</a> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul></body></html>
1 回答
落寞回头不如华丽转身
TA贡献11条经验 获得超4个赞
产生这个主要原因是因为定时器, 当你移入时, 开启了定时器, 当你移除是, 有开启了一个定时器, 一个增加高度, 一个减少高度, 两者同时运行 ,所以看起来 就是这样的情况
建议 增加一个 timer 变量 , 移入移除的时候 先清空定时器 ,在从新开启一个定时器 ,既可以解决这个问题, 如不懂 请继续提问
添加回答
举报
0/150
提交
取消