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

html-css050

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

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

在使用 ant-design vue 组件中的a-table的时候，有个需求就是在table的左边加一个树形菜单，

树形菜单和a-table在一行显示，首先想到的是用flex布局，在树形菜单和a-table的外面放一个大的div包裹起来 使用flex布局。

可是在使用了flex布局后，发现原来a-table的滚动条不显示了，琢磨了半天，发现原来是放表格的div的宽度问题，可是flex布局弹性盒子，父容器如果没有规定width属性，默认100%，a-table又很长，换不了行，就隐藏超出屏幕的部分，滚动条不显示。

右边的假文 代表表格

如果给右边的div加个宽度就可以了，可是父元素是100%的，这个怎么定这个宽度呢？别忘了，我们在css3中学过的计算属性 calc()

使用这个属性，问题就完美解决了，它是个动态变化的值如果在右边div上添加 width: calc(100% - 150px)“-”的两边有空格。就完美解决了