有没有办法使用CSS在垂直导航侧栏中单击时显示和隐藏嵌套列表?如果没有,最好的方法是什么?
您想要隐藏它吗? 最好使用简单的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。
.toggle()
。 - J D我猜你想展示嵌套列表的 onclick
事件?
我建议使用 jQuery (JavaScript) 并像这样做:
$('ul.outerlist>li').on(`click`, function(){
$(this).find('ul.innerlist').toggle();
});
编辑:这是我能想象到的最简单的方法。其他任何事情都取决于你想要实现什么。
。
ul#childlist
{
display:none;
}
ul#parentlist li:hover ul#childlist
{
display: block;
}
你可能需要增加边框或边距以使其更流畅地运行。 你也可以查找CSS过渡效果,它们非常适合在没有任何JavaScript的情况下实现类似JavaScript的效果。
希望这能帮到你。
http://www.htmldrive.net/items/show/143/jQuery-Advanced-docking-Side-Menu
如果您正在寻找垂直菜单,请输入以下内容:
http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/