jquery之二级导航栏中mouseleave与mouseout的应用
更新:HHH   时间:2023-1-7


今天无聊写了个二级导航栏,发现了一个以前根本没注意的问题,那就是mouseleave的事件。故记录在此,菜鸟飘过。

二级导航栏的功能无非就是鼠标至于某标题上时,显示其若干子标题,离开某标题至于另外一标题时,显示对应的子标题并隐藏其他的子标题。还有,就是鼠标离开所有的标题或子标题时,应隐藏所有的子标题。

一开始便全用mouseover和mouseout事件处理,但发现鼠标离开所有的标题或子标题时,最后一次显示出的子标题没有被隐藏。body代码如下:

[html] view plaincopy

  1. <ul class="ul_list">  

  2.   <li class="li_list">main</li>  

  3. </ul>  

  4. <ul class="ul_list">  

  5.   <li class="li_list">Autobots</li>  

  6.   <li class="sub_li">Optimus Prime</li>  

  7.   <li class="sub_li">Bumble Bee</li>  

  8.   <li class="sub_li">Ironhide</li>  

  9.   <li class="sub_li">Jazz</li>  

  10. </ul>  

  11. <ul class="ul_list">  

  12.   <li class="li_list">Decepticons</li>  

  13.   <li class="sub_li">Megatron</li>  

  14.   <li class="sub_li">Shockwave</li>  

  15.   <li class="sub_li">Soundwave</li>  

  16.   <li class="sub_li">Starscream</li>  

  17. </ul>  


CSS如下:

[css] view plaincopy

  1. .ul_list{  

  2.     width:200px;  

  3.     float:left;  

  4.     text-align:center;  

  5.     padding:0;  

  6.     position:relative;}  

  7. .li_list{  

  8.     list-style:none;  

  9.     text-align:center;  

  10.     background:#CCC;  

  11.     height:40px;  

  12.     line-height:40px;  

  13.     font-size:18px;  

  14.     font-family:黑体;  

  15.     color:#000000;  

  16.     cursor:pointer;  

  17.     position:relative;}  

  18. .sub_li{  

  19.     list-style:none;  

  20.     text-align:center;  

  21.     background:#CCC;  

  22.     height:40px;  

  23.     line-height:40px;  

  24.     font-size:18px;  

  25.     font-family:黑体;  

  26.     color:#000000;  

  27.     display:none;  

  28.     cursor:pointer;  

  29.     position:relative;}  


JS如下:

[javascript] view plaincopy

  1. $(document).ready(function(e) {  

  2.         $(".li_list").mouseover(function(){  

  3.             $(this).siblings(".sub_li").show("slow");  

  4.             $(this).parent(".ul_list").siblings(".ul_list").children(".sub_li").hide("slow");     

  5.         });  

  6.         $(".ul_list").<span style="color:#ff6666;">mouseout</span>(function(){  

  7.             $(this).children(".sub_li").hide("slow");  

  8.         });  

  9.         $(".sub_li").mouseover(function(){  

  10.             $(this).css({"border-top":"1px #FFFFFF solid",  

  11.                         "border-bottom":"1px #FFFFFF solid"});    

  12.         });  

  13.         $(".sub_li").mouseout(function(){  

  14.             $(this).css("border""none");    

  15.         });  

  16.     });  


试了一些方法也不行,后来把上述第二项的mouseout事件改为mouseleave则可以,查了资料,mouseout是不论鼠标指针离开被选元素或其子元素,都被触发;而mouseleave是只有在鼠标指针离开被选元素时,才触发。


返回web开发教程...