动画WordPress（二十十三）子菜单

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; 
}