當鼠標懸停在下拉菜單上時，JQuery懸停下拉菜單消失

我正在做一些與我見過的工作略有不同的事情，很多人都這樣做，所以下拉列表是兒童列表的一部分。不過，我正在嘗試使用兄弟的下拉菜單。當鼠標懸停在下拉菜單上時，JQuery懸停下拉菜單消失

什麼，你會發現是，如果你將鼠標懸停在按鈕上，出現下拉菜單。如果你離開按鈕，它會消失，這是完美的。但是，如果您將鼠標懸停在下拉菜單上，它仍會消失，這不是我想要的功能。

我該如何預防？

我已經看到了這樣的工作：

if($('#menuONE').has(e.target).length === 0) { 
     // toggle menu to close 
    }

但是我不知道怎樣才能以及附加至子菜單的按鈕。

來源

2014-12-04 mdixon18

試試這個

var isSiblingHovered = false; 
$('.dropdown-hover-toggle').hover(function() { 
    $(this).siblings('.dropdown-menu').slideDown(); 
}, 
function() { 
    var current = $(this); 
    setTimeout(function(){ 
     if(!isSiblingHovered){ 
      current.siblings('.dropdown-menu').stop().slideUp(); 
     } 
    }, 50); 
}); 

$('body').on("mouseleave", ".dropdown-menu", function() { 
    isSiblingHovered = false; 
    $('.dropdown-menu').stop().slideUp(); 
}); 

$('body').on("mouseenter", ".dropdown-menu", function() { 
    isSiblingHovered = true; 
});

EXAMPLE

來源

2014-12-05 00:03:32

如果將鼠標懸停在按鈕上而不是菜單上，則菜單保持打開狀態，直到您將鼠標懸停在菜單上，然後離開。這不起作用。 – mdixon18 2014-12-05 00:06:22

在小提琴中工作，我在我的項目中有相同版本的JQuery，但我得到這個問題：未捕獲的錯誤：語法錯誤，無法識別的表達式：不支持僞：懸停 – mdixon18 2014-12-05 00:26:49

不錯，但我們可以改進它來處理多個工作，嘗試切換這兩個之間：http://jsfiddle.net/58m99wf8/6/ – mdixon18 2014-12-05 00:37:23

你可以做的是將菜單添加到選擇器。我也定義了菜單，因爲現在可以引用按鈕或菜單，所以從那裏遍歷可能會有問題。

var menu = $('.dropdown-menu'); 

$('.dropdown-hover-toggle, .dropdown-menu').hover(

function() { 
    //show its sibling menu 
    menu.stop().slideDown(); 
}, 

function() { 
    //hide its sibling menu 
    menu.stop().slideUp(); 
});

http://jsfiddle.net/58m99wf8/1/

來源

2014-12-04 23:53:43 Kolby

，如果你有多個菜單，這將是一個可怕的做法。有沒有辦法從懸停功能中定位$（this），但只能指定.dropdown-menu的這個實例？ – mdixon18 2014-12-04 23:58:18

當鼠標懸停在下拉菜單上時，JQuery懸停下拉菜單消失

回答

相關問題