自定義HTML下拉菜單中的「touch and feel」

Question

我在HTML頁面+ JavaScript頁面上自定義了下拉菜單。我想該菜單充當如下：

• 當按鈕「Freunde」被點擊，下拉菜單出現
• 當按鈕被再次點擊，下拉菜單消失
• 當鼠標curor離開按鈕+下拉菜單的「區域」，它消失

下拉菜單由一個帶有多個div的主div（「菜單項」）組成。

我的第一種方法是把一個onmouseout()在下拉菜單的主要DIV，但有以下問題：當我將鼠標懸停在一個內部的div中，onmouseout()是真實的，因爲內的div填補整個主div，只要用戶不會將鼠標懸停在其上，下拉菜單就可見。

所以我試着像JQuery的lightbox類似地解決問題，即在整個屏幕上放置一個「背景」div並粘貼下拉菜單，並在那裏設置onmouseover()。這幾乎是完美的，但「Freunde」按鈕也受到影響。

那麼有沒有什麼辦法可以結合不同元素的事件？像

if(cursor is not over Button && cursor is not over DDMenu) set invisible 

標誌着我希望的是在下面的圖片

Answer 1

假設你設置爲

<ul> 
    <li></li> 
    <li></li> 
</ul> 

你可以設置你的CSS是這樣的：

#nav ul li ul { display: none; } 
#nav ul li.active:hover ul { display: block; } 

然後設置你的JS是這樣的：

var menuClick = function() { 
    $(this).toggleClass('active'); 
    menuHover(); 
}; 
var menuHover = function() { 
    $('#nav li.active').hover(function() { 

    }, function() { 
     $(this).removeClass('active'); 
    }); 
}); 

$('#nav > ul > li').on('click', menuClick); 

當然，這絕對是總的編碼，但我認爲它應該工作。 （這也假設你正在使用jQuery庫）。