Анимация 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; 
}