javascript - 单击父菜单时子菜单不会打开

Question

我正在编辑一个 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);

}

Answer 1

您可以简单地添加此事件，而无需使用这么多代码。您可以简单地调用您的 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 代码，您将能够处理尽可能多的子菜单。