javascript - 如何让我的wordpress移动导航多层次化

Question

所以，我正在构建一个 WordPress 主题并创建我的移动导航。经过几次尝试，我终于得到了一个令我满意的解决方案，但我有一个大问题:我只能打开1级子菜单，如果子菜单中有子菜单，则链接会被隐藏，但我无法弄清楚找出如何让它们显示 onclick，作为第一级..

这是我用来打开第一层的js:

$('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;    
    }
});

您可以在 http://wbs.webdesign3r.de 上看到它的直播(移动端查看)

有什么解决方案可以让我添加任意数量的子级别吗？或者说，我需要为每个级别添加什么到我的 js 中？

提前致谢!

Answer 1

由于您没有在 Q 中包含任何 html 代码，因此很难找到最终解决方案，但我认为这是解决方案。

js:

$('ul.nav-mobile li > a').click(function() {
    var checkElement = $(this).next(),
        $parent      = $(this).parent('li');

    $parent.addClass('active');   

    if(checkElement.is('ul') && checkElement.is(':visible')) {
        $parent.removeClass('active');
        checkElement.slideUp('normal');
    }

    if(checkElement.is('ul') && !checkElement.is(':visible')) {
        checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
        return false;
    } else {
        return true;
    }
});

这种方法会给您带来另一个问题，如果您关闭整个移动菜单并再次打开，您将看到所有打开的子菜单仍然打开。您可以通过这行代码解决该问题:

$('#nav-icon0').on('click', function(){
    // you can add a if condition here to check this element
    // has '.open' class or not and turn it to just work on close not on open
    $('ul.nav-mobile li.active').removeClass('active');
    $('ul.nav-mobile ul:visible').slideUp();
});