jQuery hover mouseleave 函数在悬停在子 div 上时触发答案

【问题标题】：jQuery hover mouseleave function triggers when hovering over child divjQuery hover mouseleave 函数在悬停在子 div 上时触发
【发布时间】：2014-04-30 00:55:01
【问题描述】：

我有一个带有子菜单的主导航菜单，它使用 jQuery 的 hover() 函数显示为下拉菜单。这个想法是，子菜单在其父 <li id="info-link"> 悬停时向下滑动，当鼠标离开 <li id="info-link">（包括其所有子菜单）时向上滑动。

我在构建静态版页面时成功实现了效果，即出现子菜单，我可以将鼠标移到子菜单中的两个项目上，在子菜单不滑动的情况下点击它们向上。但是，当我将所有内容移至 wordpress 时，悬停功能似乎不包括 <li id="info-link"> 的孩子。简单地说，悬停在<li id="info-link"> 上会出现子菜单，但进入子菜单会导致它向上滑动。（对不起，如果这解释得不好！我尽我所能！）

我不明白发生了什么变化，因为完全相同的代码在 wordpress 之外完全按预期工作......

HTML 和 jQuery：

<nav id="main-menu">
        <ul class="group" id="main-menu-items">
            <li><a href="" class="heading-text">Home</a></li>
            <li><a href="" class="heading-text">Blog</a></li>
            <li><a href="" class="heading-text">Portfolio</a></li>
            <li><a href="" class="heading-text">Events</a></li>
            <li><a href="" class="heading-text">Pricing</a></li>
            <li id="info-link">
                <a href="" class="heading-text">Info<span></span></a>
                <div>
                    <ul id="info-drop-menu">
                        <li><a href="" class="heading-text">About</a></li>
                        <li><a href="" class="heading-text">Top Tips</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="" class="heading-text">Contact</a></li>
        </ul>
    </nav><!-- end main menu -->

jQuery(document).ready(function($){
$("#info-link").hover(function(){
    if(screenSize > 850){
        $(this).children("div").height(ulHeight + 2);
        $("#info-drop-menu").css("top",-ulHeight - 2);
        $("#info-drop-menu").animate({
            top:0
        },300);
    }
},function(){
    if(screenSize > 850){
        $("#info-drop-menu").animate({
            top:-ulHeight -2
        },300,function(){
            $("#info-link div").height(0);
        });
    }
});});

更新： 以下 jsfiddle 包含所有工作代码。正如您在小提琴中看到的那样，出现了所需的效果，这（虽然有点让人放心！）让我更加困惑的是效果在网站的 wordpress 版本上不起作用。

jsfiddle

【问题讨论】：

有一些 CSS 来配合这个吗？ jsfiddle.net/isherwood/Cx6wV
ulheight 是在哪里定义的？
我已经为你更新了 jsfiddle，isherwood。并非所有样式都存在，但足以看到实际效果。问题也更新了。

标签： jquery wordpress submenu jquery-hover

【解决方案1】：

好的，我已经解决了。我不完全确定如何，但它完成了！由于我还没有替换我正在使用的主题的 index.php 中的给定代码，所以我在等待对这个问题的答复时继续这样做。神奇的是，一旦我的页面代码的其余部分被加载，悬停功能就完全起作用了。

我只能假设这是.group 类在没有剩余页面代码的情况下无法解决的崩溃问题，或者可能是z-index 项目的冲突。

很抱歉没有提供更多信息，但可能需要相当长的时间才能找到问题的具体原因。我的建议是在担心让 JS 工作之前填写所有 html 和 css！

【讨论】：