Question

在我的大项目中，我遇到了问题。代码太大了，无法在此完整发布，但我已经在jsfiddle上创建了一个示例。

我有一个带有子菜单部分的动态菜单。

我想悬停某些菜单项以显示某个盒子容器。

问题是将鼠标悬停在菜单项上时我无法访问框容器，因为它不在<li>元素内，因为它是动态加载的。

我想创建功能，在悬停菜单项上显示框容器，并检查菜单项和盒容器的鼠标输出何时隐藏框容器。

这将解决我的问题，我尝试过mouseout和mouseleave，但没有工作。

JSFiddle

＆＃13;

$('.first-menu-item, .submenu').hover(function() {
  $('.submenu').toggle();
});

＆＃13;

.menu li {
  display: inline-block;
}

.submenu {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="first-menu-item">FIRST MENU</li>
  <li>SECOND MENU</li>
  <li>THIRD MENU</li>
</ul>


<div class="submenu">
  SUBMENU
</div>

＆＃13;

Answer 1

快速解决方法是在子菜单上悬停时添加相同的逻辑：

$('.first-menu-item, .submenu').hover(function(){
  $('.submenu').toggle();
});

但是有更好的方法可以在类似列表的导航中实现子菜单（例如here）。但是，根据您的解决方案，这就是我要做的。

Fiddle

但是，您应该重新考虑子菜单的实现。例如，见Rory的建议。

子菜单在悬停时消失

1 个答案: