Question

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

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

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

为了减少混淆，我会举一个直接的例子：

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

任何帮助将不胜感激！

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

Answer 1

在jquery中使用hover函数时，这是一个常见问题，因为正在使用的选择器实际上是从一个元素移动到另一个元素。这是我这样做的方式，基本上你在菜单里面设置一个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();
});

Answer 2

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

不使用menu-plugin的示例，这只是一个概念验证

$(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;
    });
});

基于Jquery的下拉导航菜单

2 个答案: