基于 Jquery 的下拉导航菜单

Jquery based drop-down navigational menu

本文关键字：导航 菜单 Jquery 基于      更新时间：2023-09-26

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

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

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

为了不那么令人困惑，我将举一个直接的例子：

如果您将鼠标悬停在"职业"上，

然后向下移动，然后将鼠标悬停在"员工推荐"上，然后将鼠标完全移出菜单，菜单仍然会保留，直到您再次将鼠标悬停在"职业"上。

任何帮助将不胜感激！

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

演示：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;
    });
});

这是在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();
});
相关文章：