Question

我有一个带有子菜单的主导航菜单，该子菜单使用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

Answer 1

好的，我已经修好了。我不完全确定如何，但它已经完成了！因为我还没有替换我正在使用的主题的index.php中的给定代码，所以当我等待对此问题的回复时，我继续这样做。奇怪的是，一旦加载了我的页面代码的其余部分，悬停功能就完全有效了。

我只能假设这是一个折叠问题，.group类没有剩余的页面代码而没有解决，或者可能是z-index项的冲突。

抱歉没有提供更多信息，但可能需要花费一些时间来追查问题的具体原因。我的建议是在担心让JS工作之前填写所有的html和css ！

当鼠标悬停在子div上时，jQuery悬停mouseleave函数会触发

1 个答案: