On January 20, 2014 at 10:45 pm
Hi there,
Just wanted to let you know about a jQuery bug in the following code in asteria.js:
//MENU Animation
if (jQuery(window).width() > 768) {
jQuery('#topmenu ul > li').hoverIntent(function(){
jQuery(this).find('.sub-menu:first, ul.children:first').slideDown({ duration: 200});
jQuery(this).find('a').not('.sub-menu a').stop().animate({"color":primarycolor}, 200);
}, function(){
jQuery(this).find('.sub-menu:first, ul.children:first').slideUp({ duration: 200});
jQuery(this).find('a').not('.sub-menu a').stop().animate({"color":menutext}, 200);
});
We noticed our sub-menus were changing colors in odd ways, and a bit of digging led us to the issue here. As you can see, the initial jQuery selectors target two classes:
find('.sub-menu:first, ul.children:first')
which is good since the .sub-menu class doesn’t actually exist in the markup. The following .not() selectors however are missing the ul.children selector:
not('.sub-menu a')
Which means that sub-menu items ARE changing color when they should not be. Replacing the entire code block with the following fixes the problem:
//MENU Animation
if (jQuery(window).width() > 768) {
jQuery('#topmenu ul > li').hoverIntent(function(){
jQuery(this).find('.sub-menu:first, ul.children:first').slideDown({ duration: 200});
jQuery(this).find('a').not('.sub-menu a, ul.children a').stop().animate({"color":primarycolor}, 200);
}, function(){
jQuery(this).find('.sub-menu:first, ul.children:first').slideUp({ duration: 200});
jQuery(this).find('a').not('.sub-menu a, ul.children a').stop().animate({"color":menutext}, 200);
});
