jquery之二級導航欄中mouseleave與mouseout的應用

今天無聊寫了個二級導航欄，發現了一個以前根本沒注意的問題，那就是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是只有在鼠標指針離開被選元素時，才觸發。