jquery - 多级菜单: show submenu,用jquery隐藏它的父菜单

Question

我有一个 css 菜单，我想应用一些 jquery 来扩展它的功能。特别是，当通过移动设备查看时，我希望它的父菜单被子菜单替换(意味着完全隐藏父菜单)并且适用于所有更深层次的菜单(就像在 ftp 客户端上输入目录一样你看不到那棵树)。但我从一开始就面临着一个问题。到目前为止，我得到的代码隐藏了第一个父级，但不显示子菜单。我想了解为什么(我在那里做错了什么)，我还想看一个例子，说明如果您如此友善，这将如何工作。

var submenu = $('#menus li ul li');
submenu.hide();

$('#menus li:has(ul)').click(function(e)
{
    e.preventDefault();
    $('#menus li').hide(function()
    {
        submenu.show();
    });
});

除了这个，我在谷歌上找到了所有其他案例。 提前致谢。

Answer 1

在您分享的示例中，正如 A. Wolff 指出的那样，他们隐藏了 anchor 标记

Here's a quick and dirty example where you would nest <ul> inside of <li> and toggle display: none; and display: block;

在此示例中，您隐藏所有 并显示它的同级，这最终将隐藏 li 的第一级并显示第二级。 HTML

<ul>
    <li>
        <a class="forward">first</a>
        <ul class="second-layer">
            <a class="back">back</a>
            <li>Second layer Menu 1</li>
            <li>Second layer Menu 1</li>
            <li>Second layer Menu 1</li>
            <li>Second layer Menu 1</li>
        </ul>
    </li>
</ul>

CSS:

.second-layer{
    display: none;
}

.hide a{
    display: none;
}

.show a{
    display: none;
}

.show a.back{
    display:block;
}

.show .second-layer{
    display: block;
}

JQuery:

$('.forward').click(function(){
    $(this).parent().addClass('show');
    $(this).parent().parent().addClass('hide');
});

$('.back').click(function(){
    $(this).parent().parent().removeClass('show');
    $(this).parent().parent().parent().removeClass('hide');
});