jQuery 显示并在悬停时输入 div答案

【问题标题】：jQuery show and enter div on hoverjQuery 显示并在悬停时输入 div
【发布时间】：2019-10-12 20:43:18
【问题描述】：

当鼠标悬停在另一个 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')

【问题讨论】：

您可以添加整个 html 以便可以在 jsfiddle 中准备用例吗？或者您可以为此提供 jsfiddle 吗？

标签： javascript jquery coffeescript

【解决方案1】：

你为什么不试试这个：

 $(document).on 'mouseout', '.menu-bar-item', (event) =>
    $('.js-am-content').fadeOut('fast');

我的意思是当我们已经在父级上进行 mouseout 事件时，为什么我们需要检查“item:hover”

【讨论】：

我试过了，但是当我用鼠标转到下一个菜单项时，整个列表消失了。我用您编写的代码制作了一个视频，它的外观如下：youtu.be/K0At-lW3ccQ
视频不可用我的朋友
抱歉，这是私人的。现在可以使用了。

【解决方案2】：

如果可以将事件处理程序添加到父级<div>，那么试试这个。

$(".parentdiv").hover(
    function(event) {
      $(event.currentTarget).children(".js-am-content").fadeIn("fast");
    }, function(event) {
      $(event.currentTarget).children(".js-am-content").fadeOut("fast");
    }
  );

如果您无法将处理程序添加到父级，请告诉我，我会尝试其他方法。

PS：对不起，这不是咖啡脚本。

【讨论】：