jQuery 显示并在悬停时输入 div

Question

悬停在另一个 div 上时如何显示 div 的问题有答案，但在我的示例中，我需要将鼠标悬停在显示菜单栏项目列表的锚标记上，然后将鼠标悬停在该菜单列表上酒吧项目。之后，当我鼠标移出输入的列表时，该列表应该隐藏。问题是当我将鼠标悬停在菜单栏列表之外时，它并没有消失。

我试图做到这一点时，盘旋在js-expand显示js-am-content，当mouseout过menu-bar-item隐藏的内容，如果menu-bar-item没有徘徊，但内容不会隐藏。

这是我的简化 HTML

<div>

  <a class="expand js-expand fa fa-bars"></a>

  <div class="action-menu-content js-am-content">

    <a class="menu-bar-item"> SHOW </a>

    <a class="menu-bar-item"> EDIT </a>

    <a class="menu-bar-item"> COLLECTIVE </a>

    <a class="menu-bar-item"> PER ORDER </a>

    <a class="menu-bar-item"> CUSTOMS </a>

    <a class="menu-bar-item"> HISTORY </a>

  </div>

</div>

和 jQuery（咖啡脚本）

$(document).on 'mouseover', '.js-expand', (event) =>

  $parent = $(event.currentTarget).parent()

  $parent.children(".js-am-content").slideToggle('fast')

$(document).on 'mouseout', '.menu-bar-item', (event) =>

  if !$('.menu-bar-item:hover') 

    $('.js-am-content').fadeOut('fast')