Javascript 在父链接的悬停位置显示子菜单，然后在鼠标离开子菜单之前保持其可见？

我的菜单是这样安排的：

<ul class="parent-menu">
  <li class="menu-item">
    <a class="menu-item-link" href="#">Link</a>
    <ul class="sub-menu">
      <!-- sub menu list items -->
    </ul>
  </li>
  <!-- more parent menu list items -->
</ul>

当然，当鼠标离开

.menu item>a

元素时，它们就会消失。我想不出一种方法来“切换”

.toggle（）

事件的后半部分，使其基本上在整个

子菜单上充当
.mouseleave（）
元素

因此，当用户将鼠标悬停在父菜单项上时，会显示一个子菜单，并且应该能够在空闲时悬停并选择子菜单项

我该怎么办

display = false;
$('.sub-menu').toggle( display );

$('.parent-menu').mouseenter(function() {
  $('.sub-menu').toggle("slow");
});

$('.parent-menu').mouseleave(function() {
  $('.sub-menu').toggle("slow");
});

不确定你是想让每个人分开还是一起。这会把它们全部打开。
事实上已经解决了。我使用
.hover（）
使事情变得过于复杂，发现我可以简单地分别使用
mouseenter（）
和
mouseleave（）
，但在主菜单项及其子菜单的父元素上都使用后者。因此，当鼠标进入父菜单项链接时，它会显示其子菜单（我有多个子菜单，因此我必须使用
$（此）
和
find（）
或
兄弟菜单（）
）。当鼠标离开这两个菜单的父菜单时（无论是主链接还是子菜单本身），它都会被隐藏，这是应该的

代码如下：

$('.menu-item > a').mouseenter(function() {
  $(this).siblings('.sub-menu').show();

});

$('.menu-item').mouseleave(function() {
  $(this).find('.sub-menu').hide();
});

您可以使用纯CSS将子菜单的可见性设置为
visibility:hidden并更改为
可见性：可见打开
父级：悬停ul.class
$('.menu-item > a').mouseenter(function() {
  $(this).siblings('.sub-menu').show();

});

$('.menu-item').mouseleave(function() {
  $(this).find('.sub-menu').hide();
});