jquery之二级导航栏中mouseleave与mouseout的应用

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

创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为文安企业提供专业的成都网站设计、成都做网站、外贸网站建设，文安网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

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

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

[html] view plaincopy

1.   

2.   main

  

3.   

4.   

5.   Autobots

  

6.   Optimus Prime

  

7.   Bumble Bee

  

8.   Ironhide

  

9.   Jazz

  

10.   

11.   

12.   Decepticons

  

13.   Megatron

  

14.   Shockwave

  

15.   Soundwave

  

16.   Starscream

  

17.   

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").mouseout(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是只有在鼠标指针离开被选元素时，才触发。

文章名称：jquery之二级导航栏中mouseleave与mouseout的应用
路径分享：http://shouzuofang.com/article/popcsg.html