【前言】
学生提问:二级导航滑过时偶尔会出现闪烁问题,看上去不稳定
【主体】
(1)原因分析:这种情况一般都是因为事件绑定错元素导致的
(2)分清楚绑定的元素,用jQuery实现时,注意是绑定li。下面我分享个刚做的demo,参考理解下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <!--引用百度服务器的jQuery库--> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> /*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } ul{ list-style:none; } .nav>ul ul{ position: absolute; display: none; top: 50px; } ul li{ padding-bottom: 20px; float: left; line-height: 40px; text-align: center; } a{ text-decoration: none; color: #000000; display: block; width: 90px; height: 40px; } a:hover{ background-color:#666666; color:#FFFFFF; } ul li ul li{ padding-bottom: 0px; float:none; background-color:#EEEEEE; } ul li ul{ display:none; } /*为了兼容IE7写的CSS样式,但是必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li class="navmenu"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li class="navmenu"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> <script> $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> </body> </html>
.