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

Question

我在这里遇到了很多问题，试图找出最好的方法，但无法让它们与我的代码一起工作。当主菜单项元素悬停时，我只希望弹出菜单在鼠标位于其上时保持不变。请注意，子菜单不是主菜单项的子菜单。他们坐在旁边。

这是我当前的脚本： 我需要天桥菜单一直显示，直到用户将鼠标移离菜单项本身（除非移动到天桥上）或离开天桥。

$('.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();
})

您可以在此处查看实时页面：http://205.134.239.12/~artscr6/artscrush/

Answer 1

菜单的 html 不正确，因为 ul 标签只能包含 li 标签 (https://developer.mozilla.org/en/docs/Web/HTML/Element/ul)。您应该在 li 项目中添加飞出 div。解决此问题后，悬停效果也将起作用。

Answer 2

您需要mouseover 而不是hover。

---

Hover 既可以处理您想要的 mouseover，也可以处理您不需要的mouseout。只要您将鼠标从链接上移开，您的天桥就会隐藏起来。

Mouseover 将在您的鼠标点击链接时显示天桥并且不会进行任何隐藏。

注意：您仍然需要一些代码来隐藏天桥。先试试这个，看看效果如何。

---

悬停： https://api.jquery.com/hover/

鼠标悬停： https://api.jquery.com/mouseover/

添加一些代码：

包括Outside Events plugin

$('.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();
});