0

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

4

1 回答 1

1

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

尝试使用jQuery("ul#menu-menu-1 li").hover(function() {which 将选择菜单中的各个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;
}
于 2013-09-30T22:37:10.353 回答