I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work?
// Implement expandable menus
var expand_link = $('<a class="menu-expand"><span class="screen-reader-text">' + js_i18n.next + '</span></a>');
var back_link = $('<li><a class="menu-back">' + js_i18n.back + '</a></li>');
$('.menu ul.menu-wrap').data('depth', 0);
$('.menu li.menu-item-has-children > a').after(expand_link);
$('.menu .sub-menu').prepend(back_link);
$('.menu .sub-menu').hide();
$('a.menu-back').click(function () {
var parent_ul = $(this).closest('ul');
menu_level_down(parent_ul);
return false;
});
$('.menu-item-has-children a:not([href], .menu-back)').click(function () {
var parent_ul = $(this).parent().find('ul:first');
menu_level_up(parent_ul);
return false;
});
function menu_level_up(parent_ul) {
var depth = $('.menu ul.menu-wrap').data('depth');
var old_depth = depth;
var new_depth = depth + 1;
parent_ul.show();
$('.menu ul.menu-wrap').data('depth', new_depth)
.addClass('depth-' + new_depth)
.removeClass('depth-' + old_depth);
}
function menu_level_down(parent_ul) {
var depth = $('.menu ul').data('depth');
var old_depth = depth;
var new_depth = depth - 1;
parent_ul.hide(250);
if (new_depth <= 0) {
new_depth = 0;
}
$('.menu ul.menu-wrap').data('depth', new_depth)
.addClass('depth-' + new_depth)
.removeClass('depth-' + old_depth);
}