动画WordPress(二十三）子菜单

Animating WordPress (Twenty Thirteen) sub-menu

本文关键字：菜单 二十三 WordPress 动画      更新时间：2023-09-26

我正在尝试将动画添加到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） 第一个父级的子菜单是第二个父级的子菜单......

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

尝试使用 jQuery("ul#menu-menu-1 li").hover(function() { 它将选择菜单中的各个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 );
    });
});

要显示动画，请从styles.css near line 906中删除以下内容 

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul {
    display: block;
}
相关文章：