0

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

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

下拉菜单由一个主 div 组成，其中包含多个 div（“菜单项”）。

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

所以我尝试用它来解决类似于 JQuery 灯箱的问题，即在整个屏幕上放置一个“背景”div 并将下拉菜单粘贴到那里，然后在那里设置onmouseover()。这几乎是完美的，但“Freunde”按钮也会受到影响。

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

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

我在下图中标记了所需的

在此处输入图像描述

4

1 回答 1

0

假设您设置为

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

于 2012-11-13T21:07:42.993 回答