html - 使用css显示/隐藏嵌套列表

Question

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

score 7 · Accepted Answer

你想怎么隐藏？最好是使用简单的 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();
});

您也可以将 show() 替换为 fadeIn，我假设默认情况下display: none已经存在。

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

score 0 · Accepted Answer

您可以通过使用 jquery（javascript 框架）来实现这一点。

如果正在寻找侧边栏，那么此链接将对您有所帮助：

如果寻找垂直菜单类型的东西，那么这个：

score 0 · Accepted Answer

你可以使用

ul#childlist
{
    display:none;
}

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

您可能必须增加寄宿生或利润才能让它运行起来。您还可以查找 CSS 过渡，它们非常适合在没有任何 JavaScript 的情况下获得 JavaScript 风格的东西。

希望这可以帮助。

score 0 · Accepted Answer

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

我建议使用 jQuery (JavasScript) 并做这样的事情

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

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

4 回答 4