Javascript &引用；“触摸和感觉”；在自定义HTML下拉菜单中

我在

HTML

page+

JavaScript

上创建了一个自定义下拉菜单。我希望该菜单的作用如下：

• 单击按钮“Freunde”时，会出现下拉菜单
• 再次单击按钮时，下拉菜单将消失
• 当鼠标离开按钮+下拉菜单的“区域”时，它消失

下拉菜单由一个主div和多个div组成（“菜单项”）

我的第一种方法是在下拉菜单的主div上放置一个

onmouseout（）

，但有以下问题：只要我将鼠标悬停在一个内部div上，

onmouseout（）

就是真的，因为内部div填充了整个主div，所以只有用户不悬停在它上面，下拉菜单才可见

所以我试着像JQuery lightbox一样解决这个问题，即在整个屏幕上放置一个“background”div，并将下拉菜单粘贴到其中，然后在那里设置

onmouseover（）

。这几乎是完美的，但“Freunde”按钮也会因此受到影响

那么，有没有办法将来自不同元素的事件组合起来呢？像

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

我在下图中标记了所需的

---

假设您被设置为

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

然后像这样设置JS：

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

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库）