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项目中添加fly-out div。解决此问题后，悬停效果也会起作用。

Answer 2

您需要mouseover而不是hover。

Hover处理您想要的mouseover和mouseout，但不是Mouseover。只要将鼠标移离链接，就会隐藏天桥。

当您的鼠标点击链接并且不会隐藏任何内容时，

$('.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(); });会显示天桥。

注意：您仍然需要一些代码来隐藏天桥。首先尝试一下，看看它是如何工作的。

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

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

添加一些代码：

包括Outside Events plugin

{{1}}

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

2 个答案: