Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered a major issue. The problem lies in the fact that I can only expand one level of submenus at a time. When there is a submenu within another submenu, the links become hidden, and despite my efforts, I cannot seem to make them appear onclick like the first-level submenus.
Below is the JavaScript code I am utilizing to expand the first level:
$('ul.nav-mobile > li > a').click(function() {
var checkElement = $(this).next();
$('ul.nav-mobile li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('ul.nav-mobile ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
You can test this functionality live on (mobile view).
I am wondering if there exists a solution that would allow me to incorporate as many levels of submenus as desired. Alternatively, what modifications do I need to make in my JavaScript for each subsequent level?
Thank you in advance for your help!