如何使用纯CSS技术实现一个可折叠树形菜单

html-css012

如何使用纯CSS技术实现一个可折叠树形菜单,第1张

利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

五：给二级菜单绑定事件，点击时加入选中的深色背景

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>

RunJS 演示代码

</title>

<script>

function show (c_Str) {

c_Str = eval(c_Str)

c_Str.style.display == 'none' ? c_Str.style.display='block':c_Str.style.display='none'

}

</script>

  </head>

<body>

    <table>

<tr>

<td>

<div  id="ssa" onclick="show('a0')">

fdgfdfg 

</div>

<div id="a0">

<li>

00

</li>

<li>

01

</li>

</div>

</td>

</tr>

</table>

  </body>

</html>