Jquery Close Subサブメニュー

Question

これは、 "Link 3"上にマウスを置いてサブサブメニュー（ex_subnav）を開くときに機能しますが、サブメニューの他のオプションに向かって "Link 3"をマウスで押したときにex_subnavメニューを閉じる必要があります。それが動作する現在のコードでは、しかし、私はそれを再ロードメニューex_subnavする "リンク3" からマウスを移動する際ための$(".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()機能が動作することを意味します。あなたの問題を解決します

あなたはこの行を変更し、サブメニューのレイアウトのためのmouseleave（）関数を設定したい場合は、あなたのhtmlでこのよう

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

、

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

。

Unstyled Demo