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

我在google上发现了除此之外的所有其他案例。提前谢谢。

Answer 1

在您分享的示例中，他们隐藏了A. Wolff指出的锚标记

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

多级菜单：显示子菜单，用jquery隐藏它的父级

1 个答案: