我正在编辑一个Wordpress主题,我无法弄清楚如何在单击父菜单时打开子菜单。我可以更改任何此代码以实现它吗?
// 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);
}
您可以使用这么多代码添加此事件。您可以简单地调用WordPress网站的菜单,然后使用JavaScript添加点击事件。请遵循以下JavaScript代码:
jQuery('YOUR_MENU_CLASS li.menu-item-has-children > a').after('<span class="sub-menu"></span>');
var menuBtns = jQuery('.sub-menu');
jQuery(menuBtns).on('click', function(e) {
e.stopPropagation();
var el = jQuery(this).siblings('ul');
var tl = jQuery(this);
jQuery('YOUR_MENU_CLASS li ul').not(el).hide();
el.stop(true, true).toggle(400);
});
通过添加此JavaScript代码,您将能够处理子菜单和深度。