使用CSS显示/隐藏嵌套列表

Question

4

有没有办法使用CSS在垂直导航侧栏中单击时显示和隐藏嵌套列表？如果没有，最好的方法是什么？

- thechrishaddad

1

是的，有很多种方法可以做到这一点 - 你到目前为止尝试了什么？ - James

有很多种方法可以实现，例如Jquery广告示例，你尝试了什么？ - Alex Garulli

我一直在尝试通过 CSS 找到解决方案，但没有成功，但就这样了。 - thechrishaddad

4个回答

0

我猜你想展示嵌套列表的 onclick 事件？

我建议使用 jQuery (JavaScript) 并像这样做：

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

编辑：这是我能想象到的最简单的方法。其他任何事情都取决于你想要实现什么。

- peterp

0

你可以使用

。

ul#childlist
{
    display:none;
}

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

你可能需要增加边框或边距以使其更流畅地运行。你也可以查找CSS过渡效果，它们非常适合在没有任何JavaScript的情况下实现类似JavaScript的效果。

希望这能帮到你。

- Slouch

0

你可以通过使用jQuery（JavaScript框架）来实现这一点。

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

如果您正在寻找垂直菜单，请输入以下内容：

- Mike Phils

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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

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

如果这些元素是动态生成的，你可能需要使用bind。