Question

无论如何在CSS中使用垂直导航边栏显示和隐藏嵌入列表？如果不是最好的方法是什么？

Answer 1

你想如何隐藏它？最好是使用简单的CSS

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

你可以使用CSS或jQuery显然添加一些线性过渡/和淡入淡出以避免视觉跳跃。

修改

对于onClick，请使用jQuery。

$(".mySelector").click(function() { $(this).find("li").find("ul").show(); });

你也可以用fadeIn替换show（），我默认假设display: none已经存在。

此外，如果动态生成这些元素，您可能想使用bind。

Answer 2

我假设您要显示嵌套列表onclick？

我建议使用jQuery（JavasScript）并执行类似的操作

$('ul.outerlist>li').on(`click`, function(){
  $(this).find('ul.innerlist').toggle();
});

编辑：这是我能想象到的最简单的方式。其他任何事情取决于你想要达到的目的。

Answer 3

您可以使用

ul#childlist
{
    display:none;
}

    ul#parentlist li:hover ul#childlist
    { 
        display: block;
    }

您可能需要增加边界或边距以使其运行更加平稳。你也可以查找CSS转换，它们非常适合在没有任何JavaScript的情况下获得JavaScript-y ..

希望这有帮助。

Answer 4

您可以使用jquery（javascript框架）实现此目的。

如果要查找侧边栏，则此链接可以帮助您：

http://www.htmldrive.net/items/show/143/jQuery-Advanced-docking-Side-Menu

如果选择了Vertical菜单，请输入以下内容：

http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/

用css显示/隐藏嵌套列表

4 个答案: