Question

我在wordpress投资组合网站上工作。我在codepen中模拟了导航，它按照我希望的方式工作。 http://codepen.io/ElaineM/pen/GgjgVE

    $(".menu-item").mouseover(function(){
        $(this).find("ul").stop().slideDown(500);
 });  
    $(".menu-item").mouseout(function(){
        $(this).find("ul").stop().slideUp(500);
    });

但是，当我在Wordpress中更新项目文件时，下拉子菜单不可见。当我从jQuery函数中删除.stop（）时，鼠标悬停时会显示下拉子菜单，但动画会无休止地循环。 http://www.elainematthias.com/

我还有下拉子菜单使用下面的代码，但我更喜欢使用.slideDown（）和.slideUp（）或类似的动画效果来软化子菜单外观。

$(".menu-item").mouseover(function(){
            $(this).find("ul").css("display","block")
        })
        $(".menu-item").mouseout(function(){
            $(this).find("ul").css("display","none")
        })

Answer 1

从子菜单height: 1px;中删除<ul>。

jQuery函数的代码少了

$(".menu-item").hover(function(){
        $(this).find("ul").stop().slideDown(500);
 },function(){
        $(this).find("ul").stop().slideUp(500);
    });

工作演示http://jsfiddle.net/L05h18ue/4/

.stop（）在Wordpress中表现得很奇怪

1 个答案: