Question

我正在尝试使用JQuery创建悬停菜单效果。我正在寻找的完美示例可以在http://www.godaddy.com/（查看绿色栏）

找到

我见过的所有示例都使用UL和LI嵌套元素。但是，我希望使用非嵌套的元素来实现这一点。如果你检查godaddy的源代码，那么你可以看到这些元素是非嵌套的，就像我想要的那样。

想象一下，我有一些标记如下......

<div>
   <a id="button1"><img .../></a>
   <a id="button2"><img .../></a>
   <a id="button3"><img .../></a>
</div>
<div id="menu1">
   //anything I want in here (links, labels etc.)
</div>

我希望能够创建一个javascript函数，可以调用它来设置这些菜单，如下所示......

SetupMenu("#button1", "#menu1");

这个函数将定位div元素（这是绝对的），我可以毫无问题地做到这一点。我无法解决的问题是悬停事件。我有一个关于这些事件的简单例子......

$(button).mouseenter(function (e) {
   $(menu).show();
});
$(button).mouseleave(function (e) {
   $(menu).hide();
});

显然这对于显示菜单非常有用，但是当您想要将鼠标悬停在菜单上时，则会为按钮触发鼠标离开（正如我所料）。我知道这是错误的做法，但我只是在展示我现在的位置。

感谢您的帮助

相关CSS如下（出于示例目的而修改名称）......

#menu1
{
    position:absolute;
    display:none;
    min-width:100px;
    padding:10px 10px 20px 10px;
}

#button1
{
    height:16px;
    width:16px;
    display:inline-block;
    padding:4px;
    cursor:pointer;
}

Answer 1

var intVal = 0;
$(button).mouseenter(function (e) {
   $(menu).show();
});
$(button).mouseleave(function (e) {
  intVal=  setTimeout(function() { $(menu).hide(); }, 1000);
});

$(menu).mouseenter(function() {
   clearTimeout(intVal);
});
$(menu).mouseleave(function(e) {
   $(this).hide();
}

这可以帮助你，你的菜单不会被隐藏直到1秒，但如果鼠标在你打开的菜单上，它将清除超时并且菜单将被打开直到mouseleave。

Answer 2

我无法弄清楚你的代码。但我认为你必须使用ul＆amp;下拉菜单的li组合。

点击this link

查看简单示例

Answer 3

这是一个适合我的解决方案。首先，我将按钮和菜单包装在元素中，然后使用JavaScript将鼠标中的菜单隐藏在包装元素之外。其次，我使用JavaScript循环遍历所有菜单，并将鼠标悬停在任何按钮上。最后，我将鼠标悬停在按钮上显示相关菜单。

<div class="wrapper"> <!--On mouse OUT hide all menus -->

  <div>
    <a id="button1"></a> <!--On mouse OVER hide all menus then show associated menu -->
    <a id="button2"></a>
    <a id="button3"></a>
  </div>

  <div id="menu1">
    anything I want in here (links, labels etc.)
  </div>

</div>

悬停导航菜单，包含非嵌套元素

3 个答案: