javascript - "touch and feel"在自定义 HTML 下拉菜单

Question

我在 HTML 页面 + JavaScript 上制作了一个自定义下拉菜单。我希望该菜单如下所示:

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

下拉菜单由一个主 div 和多个 div(“菜单项”)组成。

我的第一个方法是在下拉菜单的主 div 上放置一个 onmouseout()，但存在以下问题:一旦我将鼠标悬停在内部 div 上， onmouseout() 为真，并且由于内部 div 填充了整个主 div，下拉菜单仅在用户未将鼠标悬停在其上时可见。

所以我尝试像 JQuery 灯箱一样解决它，即在整个屏幕上放置一个“背景”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 库)。