Javascript 设置WordPress（二十三）子菜单的动画

我正在尝试向wordpress的下拉菜单添加动画。我正在使用以下代码：

jQuery(function() {
    jQuery("ul#menu-menu-1").hover(function() {
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });

});

---

但是1它在一个已经就位的子菜单上运行，2第一个父菜单的子菜单是第二个父菜单的子菜单…

您的选择器是整个导航菜单的子菜单，当鼠标悬停在菜单的任何部分上时，所有子菜单都会出现

尝试使用JQUERYLUMENU-menu-1LI.hoverfunction{，它将选择菜单中的各个li元素

然后使用.children而不是.find，以作为悬停菜单项的直接子项的目标li元素

jQuery(function() {
    jQuery("ul#menu-menu-1 li").hover(function() {
        jQuery(this).children('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).children('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });
});

要显示动画，请从第906行附近的styles.css中删除以下内容

---

您的代码在上面的链接上处于活动状态，但动画不会被触发。我已包含一个CSS编辑以使动画显示。它不会显示，因为您的CSS正在子菜单上强制显示：块，取消动画。

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul {
    display: block;
}