jquery - 鼠标离开时关闭菜单

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

这里是一个通过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>