javascript - 移出鼠标后隐藏另一个元素中的子菜单

Question

我制作了一个子菜单列表，当用户将鼠标悬停在li列表上时使用 jquery 显示/隐藏，每个li显示一个单独的元素。现在我遇到了 jQuery 代码的问题，当鼠标离开时，它隐藏了元素并且无法检测到该元素上的悬停事件。

问题是，当切换到另一个列表菜单项并离开元素块时，我可以隐藏它。但我需要它继续显示子菜单，以防鼠标悬停在它上面。

这是代码：

$(".left-nav-list-view nav ul li").mouseenter(function () {
  clearMenuFlyout();
  if ($(this).data('has-submenu')) {
    var submenu_id = $(this).children('a').data('menu-id');
    $(".flyOut-nav-container").append($("[id=" + submenu_id + "]")).position({
      my: "left+1 top+0",
      at: "right top",
      of: this
    });
  }
}).on("mouseleave", function () {

});

function clearMenuFlyout(){
  $(".flyout-temp-container").append($(".flyOut-nav-container").children());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav-container flex-fixed">
  <nav class="left-nav-view collapsed" role="navigation">
    <div class="app-logo">
        <div class="burger-menu">
          <span class="burger-menu-icon"></span>
        </div>
      </div>
    <div class="left-nav-list-view">
      <nav>
        <ul>
          <li><a href="#"><span>Dashboard</span></a></li>
          <li id="AccountingMenu" data-has-submenu="true"><a data-menu-id="AccountingMenuItems" href="#"><span>Accounting</span><i class="list-in fa fa-chevron-right"></i></a></li>
          <li id="InventoryMenu" data-has-submenu="true"><a data-menu-id="InventoryMenuItems" href="#"><span>Inventory</span><i class="list-in fa fa-chevron-right"></i></a></li>
        </ul>
      </nav>
    </div>
  </nav>
</div>

基本上clearFlyout函数需要一个已经存在的菜单元素并将其扔到另一个 div。.flyout-temp-container默认隐藏

标签： javascriptjquery