在我访问链接之前下拉菜单消失答案

【问题标题】：Drop down menu disappearing before I get to the links在我访问链接之前下拉菜单消失
【发布时间】：2012-03-10 01:07:42
【问题描述】：

查看this page 菜单中的游览链接。当我将鼠标悬停在游览上时，它应该显示菜单并让我选择我希望单击的子菜单，但它消失得太快了。

这是菜单的代码：

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);

有人知道为什么会这样吗？

【问题讨论】：

您应该将hover 事件处理程序添加到li 元素，而不是a。
这是正常的做法，是的。但我只想让子菜单在您将鼠标悬停在文本上时出现，而不是整个块。 :p

标签： javascript jquery

【解决方案1】：

看起来就这么简单：

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

或者，对于智障老板：

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

【讨论】：

它必须是兄弟姐妹和孩子，而不是 find。干得好，它就像现在应该的那样工作：D

【解决方案2】：

试试

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

【讨论】：

这个不行，因为mouseenter/leave还是基于anchor标签的。

【解决方案3】：

150 毫秒是一个相当短的时间范围。请改用更长的时间范围。

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

您可能还希望在将鼠标悬停在子菜单上时使其淡入... 您需要更改选择器（引用整个列表项而不是仅引用链接）。

示例
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();

$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

【讨论】：

如果我将鼠标悬停在 <a> 标签之外，链接仍然会消失。如果我悬停在子菜单的<ul> 上，我需要它留下来
@imjp 我为此添加了一个示例。

【解决方案4】：

您可以尝试在鼠标悬停时淡入并在鼠标移出时淡出，而不是使用悬停。这可能更适合您的情况，并让您更好地控制每个单独的事件。查看here发布的示例。

【讨论】：

错了。他为悬停（over、out）定义了两个处理程序。检查 jQuery API。 -- api.jquery.com/hover
你能举个例子吗？
@Smamatti 你说得对，我更改了答案以删除错误陈述，但仍然明白我的意思。谢谢！

【解决方案5】：

如果您将鼠标指针放在“游览”链接上，您会发现它不会消失。但是，当您将鼠标从 a 元素上移开时，它会消失，就像它应该的那样。

如果您将 hover 与父 li 元素一起使用，它将适用于包括“游览”链接和您正在淡入的子菜单的整个容器。

【讨论】：