如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

Posted 2023-05-08

【中文标题】如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

【英文标题】：How to keep the Parent menu hovered while the mouse is in child menu in a Dropdown Menu

【发布时间】：2011-05-17 10:22:37

【问题描述】：

大家好，我想知道如何在子菜单中移动鼠标时保持父菜单悬停。

我是 jQuery 的初学者，我希望你能帮我一些提示/建议。

LINK TO MENU WEBSITE

jQuery 代码

// Navigation Slide //
var navHover = function () 
    $("#S" + this.id).animate(top: '-40px', 300, 'swing')
    $(this).animate(paddingTop: '30px', 300, 'swing').animate(paddingTop: '45px', 300, 'swing')
    $("#I" + this.id).animate(top: '-10px', 300, 'swing').animate(top: '0px', 300, 'swing')

var navRelease = function () 
    $("#S" + this.id).animate(top: '-130px', 300, 'swing');


$('#navInside a.topLevel').hover(navHover, navRelease);


// Dropdown animation       
            function mainmenu()
            jQuery(" #navInside ul ").css(display: "none"); // Opera Fix
            jQuery(" #navInside li").hover(function()
                    jQuery(this).find('ul:first').css(visibility: "visible",display: "none").slideDown(500);
                    ,function()
                    jQuery(this).find('ul:first').css(visibility: "hidden");
                    );
            

             jQuery(document).ready(function()                 
                mainmenu();
            );

导航 html

<div id="navInside">
<li><a class="topLevel" href="">Home</a></li>
<li><a class="topLevel" href="">Options</a>
    <ul>
      <li><a href="">Submenu 1</a></li>
      <li><a href="">Submenu 2</a></li>
    </ul>
</li>
<li><a class="topLevel" href="">Thanks</a></li>

【问题讨论】：

不错的菜单！您可以在这里发布相关的 html、css 和 jQuery，或者作为小提琴发布，以便我们更好地帮助您？

好的我添加代码^^希望它帮助你^^谢谢

【参考方案1】：

问题是您的***悬停在 元素上。移动到子菜单会在 元素上触发 mouseleave 事件，因为子菜单元素不是 的子元素，而是 的子元素。试试这个：

$('#navInside a.topLevel').parent().hover(navHover, navRelease);

顺便说一句 - 您可以通过在悬停函数中使用 $(this) 来简化您的 navHover/navRelease 代码。这样你就不需要元素上的特定 ID。您只会找到相对于当前元素的它们。

【讨论】：

感谢您的回答，我遇到了一个小问题，但移动 id 解决了它^^

【参考方案2】：

你根本不需要 JS。以下是jsFiddle 的解释：

您希望仅在将鼠标悬停在 ul 上时才显示它是 li 的子代。这由li ul（鼠标悬停状态）和li:hover ul（鼠标悬停状态）处理。

当您将鼠标悬停在其上时，LI 的高度会发生变化，因为您现在也在显示 UL，因此只要您不离开其 (LI) 区域（包括其文本 + UL）。

---

如果您想要一些动画，请查看 CSS 过渡。浏览器支持参差不齐，但也许您正在尝试做的事情将得到普遍支持。准确判断区域变化的元素上的 mouseover/out 事件可能很棘手。我建议仅当您真的需要这样做时才使用 JS。

【讨论】：

问题在于绿色滑块的动画