下拉菜单:需要注意的一点,在下拉过程中有动画队列,非常影响体验,需要在实现下拉菜单过程中去除掉
代码如下
<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } .nav{ width:300px; height:40px; background:red; margin:100px auto; } .nav>li{ list-style:none; float:left; width:100px; text-align:center; line-height:40px; } .sub{ background:blue; display:none; } .sub>li{ list-style:none; width:100px; text-align:center; line-height:40px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('.nav>li').mouseenter(function(){ //获取到所有的nav下li的进入事件 var $sub=$(this).siblings().children('.sub') //$(this).siblings(),表示不是鼠标所选到的其他li,.children('.sub'),表示不是鼠标选到li下的类为sub $(this).children('.sub').stop().slideDown(1000) //$(this)表示鼠标所选到的li,.children('.sub'),选到li下的sub这个类,.stop(),停止之前所有的动画(如果不停止,当你鼠标快速切换,会发现动画在一直重复执行,影响体验),执行后面的下滑事件 $sub.stop().slideUp(1000) //.stop(),同上, }) $('.nav').mouseleave(function(){ //当离开nav时触发 $('.nav>li').children('.sub').stop().slideUp(1000) //找到,nav>li下的sub,先停止动画队列,让它们上滑隐藏起来 }) }) </script> <body> <ul class="nav"> <li>tab1 <ul class="sub"> <li>tab1二级菜单</li> <li>tab1二级菜单</li> <li>tab1二级菜单</li> <li>tab1二级菜单</li> <li>tab1二级菜单</li> <li>tab1二级菜单</li> </ul> </li> <li>tab2 <ul class="sub"> <li>tab2二级菜单</li> <li>tab2二级菜单</li> <li>tab2二级菜单</li> <li>tab2二级菜单</li> <li>tab2二级菜单</li> <li>tab2二级菜单</li> </ul> </li> <li>tab3 <ul class="sub"> <li>tab3二级菜单</li> <li>tab3二级菜单</li> <li>tab3二级菜单</li> <li>tab3二级菜单</li> <li>tab3二级菜单</li> <li>tab3二级菜单</li> </ul> </li> </ul> </body> </html>
效果如下