I am working on a menu that includes both parent and child elements. When you hover over a parent item with children, the submenu smoothly slides down, and when you hover off, it slides back up.
However, I am facing a challenge. How can I modify this jquery so that when a user is on a child page, the submenu remains open by default?
Essentially, I want to have the submenu open on page load if the item has the class "current_page_ancestor".
jQuery(function($) {
$('.side-menu ul > li, ul.children > li, .side-menu ul > li, ul.sub-menu > li').hover(function () {
if ($('> ul.children, > ul.sub-menu',this).length > 0) {
$('> ul.children, > ul.sub-menu',this).stop().slideDown('slow');
}
},function () {
if ($('> ul.children, > ul.sub-menu',this).length > 0) {
$('> ul.children, > ul.sub-menu',this).stop().slideUp('slow');
}
});
});