mouseLeaveのメニューを閉じる

Question

ナビゲーションメニューがホバー上で自動的に開きますが、マウスカーソルを動かすと自動的に閉じません。

ここに私のコードは、私が間違っている場所を修正します。

jQuery(document).on('hover', '.mobile-sub-menu-controller', function() { 
     jQuery(this).siblings('.sub-menu').slideFadeToggle('return-position', 400); 

     if (jQuery(this).find('i').hasClass('icon-angle-down')) { 
      jQuery(this).find('i').removeClass('icon-angle-down'); 
      jQuery(this).find('i').addClass('icon-angle-up'); 
     } else { 
      jQuery(this).find('i').removeClass('icon-angle-up'); 
      jQuery(this).find('i').addClass('icon-angle-down'); 
     } 
    }); 

アドバンス

Answer 1

でのおかげで、あなたがこのブロックを出るときにここで

Answer 2

がmouseoverとmouseleave

$(document).on('mouseover', '.mobile-sub-menu-controller', function() { 
 
     $(this).find('.sub-menu').stop().slideDown('fast'); 
 
}); 
 
$(document).on('mouseleave', '.mobile-sub-menu-controller', function() { 
 
     $(this).find('.sub-menu').slideUp('fast'); 
 
});

.mobile-sub-menu-controller{ 
 
    padding:10px; 
 
    border:1px solid red; 
 
    cursor:pointer; 
 
} 
 
.sub-menu{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='mobile-sub-menu-controller'> 
 
    open menu 
 
    <ul class='sub-menu'> 
 
    <li>menu item1 
 
    <li>menu item2 
 
    <li>menu item3 
 
    </ul> 
 
</div>

を通じて一例である代わりに、ホバーの mouseenterを使用してみてください、と mouseleave

Answer 3

エイリアスの構文を使用します。

jQuery(document).on('hover', '.mobile-sub-menu-controller', function() { 
    // enter code here 
    },function(){ 
    // exit/mouse leave code here 
}); 

または直接イベント：

jQuery(document).on('mouseenter', '.mobile-sub-menu-controller', function()  { 
    // enter code here 
    }); 
jQuery(document).on('mouseleave', '.mobile-sub-menu-controller',,function(){ 
    // exit/mouse leave code here 
});