jquery關閉子子菜單

Question

好吧，這工作時，我將鼠標懸停在「鏈接3」它打開子子菜單（ex_subnav），但我需要關閉ex_subnav菜單時，我將鼠標移動到子菜單中的其他選項「鏈接3」。有了它的工作原理當前的代碼，但是當我移動鼠標從 「鏈接3」 ex_subnav菜單重新加載它，因爲$(".ex_dropdown").mouseleave(function(){

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("ul.topnav li a").mouseenter(function() { 
      $(this).parent().find("ul.subnav").slideDown('fast').show(); 
     }); 


     $(".dropdown").mouseleave(function(){ 
      $(this).parent().find("ul.subnav").slideUp('fast'); 
     }); 

     $(".ex_level").mouseenter(function() { 
      $(this).parent().find("ul.ex_subnav").stop(true, true).slideDown('slow').show(); 
     }); 

     $(".ex_dropdown").mouseleave(function(){ 
      $(this).parent().find("ul.ex_subnav").stop(true, true).slideUp('slow'); 
     }); 
    }); 

HTML：

<ul class="topnav"> 
    <li><a href="#">Home</a></li> 
    <li class="dropdown"> 
     <a href="#">About Us</a> 
     <ul class="subnav dropdown"> 
      <li><a href="#">Sub Nav Link 1</a></li> 
      <li><a href="#">Sub Nav Link 2</a></li> 
      <li><a class="ex_level ex_dropdown" href="#">Link 3</a> 
       <ul class="ex_subnav ex_dropdown"> 
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li> 
        <li><a href="#">Three</a></li> 
        <li><a href="#">Four</a></li> 
       </ul> 
      </li>  
     </ul> 
    </li> 
</ul> 
</script> 

Answer 1

它重裝，因爲

$(".ex_dropdown").mouseleave() < - 這是適用於

<a class="ex_level ex_dropdown" href="#"> 

這意味着如果你離開「a」標籤，mouseleave()函數的作品。

如果你想設置子菜單佈局鼠標離開（）函數，只是改變這一行，

<li><a class="ex_level ex_dropdown" href="#">Link 3</a> 

像這樣在你的HTML，

<li class="ex_level ex_dropdown"><a href="#">Link 3</a> 

，將解決你的問題。

Unstyled Demo