Question

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

Answer 1

您的选择器属于整个导航菜单，当鼠标悬停在菜单的任何部分上时，会显示所有子菜单。

尝试使用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;
}

动画WordPress（二十三）子菜单

1 个答案: