基于jQuery的下拉导航菜单

Question

我正在尝试创建动画（几乎没有）下拉菜单。如果您查看我的页面的源代码，则可以使用 JS 文件。我有它基本上工作。

我的问题是：当我将鼠标悬停在主菜单中的某个内容上，然后直接向下进入弹出（向下）的子菜单时，如果我随后将鼠标悬停在该菜单中的某个内容上并离开它会留下来。

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

为了避免混淆，我将举一个直接的例子：

如果您将鼠标悬停在“职业”上，然后直接向下移动，然后将鼠标悬停在“员工感言”上，然后将鼠标完全从菜单上移开，菜单仍然会保留，直到您再次将鼠标悬停在“职业”上。

任何帮助将不胜感激！

编辑：我发现它与a href="# class="subMenuFloat" 有关每当我将鼠标悬停在这些链接上（它们是隐藏下拉菜单中的链接）时，我的下拉 div 仍然存在。我不知道为什么会发生这种情况，但如果我只是将鼠标悬停在 li 上，而错过了链接，它会正确退出。

Answer 1

演示： http://jsbin.com/welcome/13456

不使用菜单插件的示例，这只是一个概念证明

$(function() {
    var flag = false;
    $('#mainMenu li.mainMenuItems').hover(function() {
        if (!flag)
            $(this).find('.submenu').slideDown(500);

    }, function() {
        if (!flag)
            $(this).find('.submenu').slideUp(500);
    });

    $('#mainMenu li.mainMenuItems .submenu').hover(function() {
        flag = true;
    }, function() {
        $(this).slideUp(500);
        flag = false;
    });
});

Answer 2

这是在 jquery 中使用悬停功能时的常见问题，因为您使用的选择器实际上是从一个元素移动到另一个元素。这是我这样做的方式，基本上你在菜单的 li 中设置了一个 div 或 li 。示例：

<ul class="menu-hover">
  <li class="menu one">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
  <li class="menu two">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
</ul>

jquery 会是

基本上这是说，当您将鼠标悬停在菜单中的一个 li 上时，隐藏该菜单下的所有 div，这将是您下拉菜单中的所有菜单，然后显示悬停的 li 下的 div。您需要将 li 位置设为相对位置，将 div 设为绝对位置。所以理论上 div 包含在 li 下，因此当您将鼠标悬停时它会保持打开状态。

$(".menu-hover li").hover(function(){ 

 //Hide each div on hover
  $(".menu div").each(function(){
    $(this).hide();
  });

  $("div", this).show();
});