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中未包含任何$('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; } });代码，因此很难找到最终解决方案，但我认为这是解决方案。< / p>

<强> JS ：

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

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

1 row created.

如何使我的wordpress移动导航多层次

1 个答案: