jQuery下拉菜單在鼠標移出時消失

我正試圖用CSS實現世界上最簡單的下拉菜單，並且想用jQuery爲它製作一點點動畫。但jQuery中的「懸停」功能使得下拉菜單一離開觸發元素就會消失（ul＃menu li a），因此您無法從下拉列表中選擇任何內容。jQuery下拉菜單在鼠標移出時消失

你可以看到代碼和相關的問題在這裏： http://jsfiddle.net/Xx2Z7/

我想要的一切，在網上到處搜索，才發現很多人有這個問題，但沒有解決方案的工作我，我正在尋找最簡單，最清晰的代碼。

謝謝。

來源

2012-03-22 Gianfranco

我自己也有這個問題，它隱藏的原因是因爲你離開鼠標捕捉器'ul＃menu li a'並且它正在執行懸停（離開）函數。 a標籤不會覆蓋整個下拉菜單。有幾種方法可以解決這個問題，我覺得最好的方法是在標籤和'ul.menu'上使用超時。然後當鼠標進入時，清除超時！超時時間只需要幾毫秒左右 – 2012-03-22 13:21:01

選中此項：http://jsfiddle.net/Xx2Z7/4/ – 2012-03-22 13:25:41

這就是：

jsFiddle

基本上，我改變了你的js事件，動畫，現在只有你的li元素的的mouseenter和鼠標離開控制。 li包含子菜單，因此即使離開鏈接所在的區域，子菜單仍然可見。

$(document).ready(function() { 

    // Menus 
    $('ul.menu').hide(); 

    $('ul#main-nav li').mouseenter(function() { 
     $('ul.menu', this).animate({opacity: 'show'}, 'slow'); 
    }); 

    $('ul#main-nav li').mouseleave(function() { 
     $('ul.menu', this).animate({opacity: 'hide'}, 'fast'); 
    }); 

});

來源

2012-03-22 13:19:34 deantoni

這將不起作用，因爲'li'標籤隱藏在第一位。標籤上必須有一個捕捉器，或者封裝li標籤 – 2012-03-22 13:22:40

請看一下小提琴，是你想要的行爲嗎？ – deantoni 2012-03-22 13:23:41

@deantoni請將您的代碼發佈在您的答案中，所以我們不依賴於小提琴網站。 – Blazemonger 2012-03-22 13:24:07

你幾乎在那裏。由於您的子菜單是li的孩子，你只需要檢測鼠標懸停在li代替錨（鼠標懸停li孩子算作將鼠標移至li本身）：

$('ul#main-nav li').hover(function() { 
    $(this).find('ul.menu').animate({ 
     opacity: 'show' 
    }, 'slow'); 
}, function() { 
    $(this).find('ul.menu').animate({ 
     opacity: 'hide' 
    }, 'fast'); 
});

http://jsfiddle.net/Xx2Z7/3/

來源

2012-03-22 13:19:52 Blazemonger

您觸發了<a>上的懸停，因此當鼠標移出該<a>時hide（）會觸發。

$(document).ready(function() { 

    // Menus 
    $('ul.menu').hide(); 

    $('ul#main-nav li').hover(function() { 
     $(this).find('ul.menu').animate({opacity: 'show'}, 'slow'); 
    }, function() { 
     $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast'); 
    }); 

    $('ul.menu').mouseenter(function() { 
     $(this).show(); 
    }); 

    $('ul.menu').mouseleave(function() { 
     $(this).hide(); 
    }); 

});

來源

2012-03-22 13:53:56

jQuery下拉菜單在鼠標移出時消失

回答

相關問題