Javascript 将鼠标悬停在父菜单或菜单上时，保持弹出式菜单打开

我在这里遇到了很多问题，试图找出实现这一点的最佳方法，但无法使它们与我的代码一起工作。我只希望弹出式菜单在鼠标停留在主菜单项元素悬停时变为可见后保持不变。请注意，子菜单不是主菜单项的子菜单。他们坐在他们旁边

以下是我当前的脚本： 我需要天桥菜单保持显示，直到用户将鼠标从菜单项本身（除非移动到天桥上）或从天桥上移开

$('.menuItem').mouseover(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var findFlyout = '#acFly_' + id;
    $(findFlyout).show();
})

$('.menuItem').mouseleave(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var findFlyout = '#acFly_' + id;
    $(findFlyout).hide();
})

---

您可以在此处看到live页面：

菜单的html不正确，因为ul标记只能包含li标记（）。您应该在li项中添加弹出div。一旦你解决了这个问题，悬停效果也会起作用。

你需要

鼠标悬停

，而不是

悬停

---

悬停

既可以处理您需要的

鼠标悬停

，也可以处理您不需要的

鼠标悬停

。一旦将鼠标移离链接，您的立交桥就会隐藏

Mouseover

将在鼠标点击链接时显示天桥，不会进行任何隐藏

注意：您仍然需要一些代码来隐藏立交桥。先试试这个，看看它是如何工作的

---

悬停：

鼠标悬停：

添加一些代码：

包括

---

好电话。我已经将HTML更新为不再使用真正的ul/li元素（只使用divs和类）。我不能将立交桥元素放在父元素内，因为我需要立交桥框来“突破”父元素，以便它可以在页面上展开，并且父元素必须相对定位，因为另一个子元素依赖其边界进行绝对定位。那是一个满嘴都是要打字的人…谢谢你，这是有道理的。我已经用我现在拥有的更新了问题中的代码。它可以显示/隐藏弹出型按钮，但我还需要在用户将鼠标悬停在菜单项或弹出型按钮上时保持弹出型按钮的显示状态。如何检测悬停的内容以确定何时隐藏/显示？感谢您的帮助。请修复示例页面。我来看看。谢谢，它现在应该恢复原状了，我以前一直在做。你做的是复制原来的悬停行为。你需要移除鼠标槽（顺便说一句：鼠标槽更常用）。现在天桥没有关闭。我通常用本·阿尔曼的户外活动来做这个。每当您在菜单外单击时，它将触发一个事件$（findFlyout）.on（'clickouter'，function（）{$（findFlyout）.unbind（'clickouter'）.hide（）；}）；

$('.menuItem').mouseover(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var $findFlyout = $('#acFly_' + id);
    // remove previous bound clickoutside
    $('.flyMenu').unbind('clickoutside');
    // close flyout when clicked outside
    $findFlyout.on('clickoutside', function() {
      $findFlyout.unbind('clickoutside').hide();
    }).show();
});