Javascript 鼠标悬停时出现的可单击子菜单

我有一个“子菜单”，刚好出现在上面：悬停。[[]]

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
}, function () {
    $('.sub-menu').fadeOut(120);
});

问题#1~当我：将鼠标悬停在主菜单上并想单击子菜单的链接时，它会消失

问题#2~当第一个问题解决后，我可能会有另一个问题：子菜单有很多链接，因此用户的直观行为（当他想转到最后一个链接时）是“画”一个三角形并转到那里，但这样子菜单就会再次消失。如何避免这种情况？（下图）

---

请阅读：我知道子菜单应该在li元素中，但这不适用于我正在做的事情。JSFIDLE只是一个真正的例子。

这里是解决方案，试试这个

.子菜单{
显示：无；
位置：绝对位置；
左：100px；
背景#f4；
列表样式：无；
填充：10px；
}
A.
{
宽度：101px；
显示：内联块；
}

由于嵌套

ul

s不适合您，这里有一个替代解决方案

在

.prices

的悬停事件菜单中淡入淡出。但只有当鼠标位于

子菜单的左侧时才会淡出。这将解决这两个问题

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
});
$('.sub-menu').mouseleave(function () {
    $(this).fadeOut(150);
});

此外，如果用户未进入
.sub-menu
，则可能需要在特定超时时间后隐藏子菜单

在大多数情况下，我建议您解决问题，使您的子菜单是其父菜单的实际子菜单，如果您真的无法解决此问题，那么类似的方法应该可以（）：

var priceTimeout;

function hide_prices() {
    clearTimeout(priceTimeout);
    $(".sub-menu").fadeOut(150);
}

$(".prices").on("mouseenter", function() {
    $(".sub-menu").fadeIn(150);
});

$(".prices").on("mouseleave", function() {
    clearTimeout(priceTimeout);
    priceTimeout = setTimeout(hide_prices, 1000);
});

$(".sub-menu").on("mouseenter", function() {
    clearTimeout(priceTimeout);
});

$(".sub-menu").on("mouseleave", hide_prices);

有几件事需要注意：

由于您的
.sub菜单
不是
.prices
的后代，因此当您从一个菜单移动到另一个菜单时，prices上的
鼠标移动总是会触发。我们通过设置超时来解决这个问题，以及您的“三角形”鼠标移动问题，然后清除子菜单。如果我们在该点之前进入子菜单，我们会清除超时，这样它就不会被隐藏

您可以像以前一样使用缩写
.hover（）
来缩短此代码，但我更希望始终使用显式
.on（）
方法

您的问题是因为添加了
mouseout
事件处理程序（hover

中的第二个参数），每当子菜单被触发时，它都会隐藏子菜单。有一个简单的解决方案，就是在实际隐藏子菜单之前提供大约

100

ms的延迟，它足够短，不会造成视觉上的差异，但它使在子菜单上悬停有机会停止子菜单的当前动画（即

delay

和随后的

fadeOut

）。因此，代码应添加以下内容：

// .prices:hover shows .submenu
$('.prices').hover(function () {
    $('.sub-menu').stop(true,true).fadeIn(150);
}, function () {
    $('.sub-menu').stop(true,true).delay(100).fadeOut(120);
});
//
$('.sub-menu').hover(function(){        
    $(this).stop(true);  
    $(this).fadeIn(0);
}, function(){
    $(this).fadeOut(120);
});

---

注意：你的第二个问题不应该太在意。通常，用户应首先将鼠标移动到子菜单上。否则我们将没有任何解决方案，除非当鼠标移出价格菜单时，让子菜单显示出来。

我是怎么说的，我不能在我的项目中这样做（JSFIDLE只是一个例子），这并不能解决问题2（直观的用户操作）。不理解你的第二个问题。它应该如何与三角形关联？为什么子菜单会再次消失？@KingKing他只是想显示光标移动的距离比红色标记的要长。（斜边，因此是三角形参考）@KingKing刚刚更新了图像。不起作用，因为移出

Prices

不会隐藏子菜单。是的，我理解。如果我在移出价格时隐藏了子菜单，它不会解决问题2。

.stop（）

的使用效果很好，但我认为您也应该在

.prices

悬停部分使用它。将鼠标移入或移出“价格”部分，您将看到，否则您可以堆叠一个大的动画队列。@lan Clark谢谢，解决了这个问题，实际上这也是OP代码的原始问题。TY:）-我认为您还应该增加子菜单淡出的延迟，以实现“三角形”鼠标移动影响OP请求。然后是我的+1:）我想这取决于OP，如果是我，我永远不会关心这样的问题。子菜单不应该太长，可能应该有一些滚动条，而且我认为通常情况下，几乎所有用户（包括我）都会尽快将鼠标移动到子菜单上，然后向下滚动菜单。“我永远不会关心这样的问题”，好吧，但OP要求能够从菜单直接移动到“2014年”在他的形象中，这在120毫秒内是不可能的

// .prices:hover shows .submenu
$('.prices').hover(function () {
    $('.sub-menu').stop(true,true).fadeIn(150);
}, function () {
    $('.sub-menu').stop(true,true).delay(100).fadeOut(120);
});
//
$('.sub-menu').hover(function(){        
    $(this).stop(true);  
    $(this).fadeIn(0);
}, function(){
    $(this).fadeOut(120);
});