css怎样写列表展开与收起成果？
发布时间：2022-04-18 14:27:52 所属栏目：语言 来源：互联网
导读：如何css实现列表展开与收起？下图效果想必大家都有看到过，列表的展开与收起效果在网站设计中还是比较常见的，那么种效果是如何实现的呢？下面我们就来一起学习一下。 笔者的第一反应就是用height+overflow:hidden;实现，既没有性能问题，也不必担心显示问题
|
如何css实现列表展开与收起？下图效果想必大家都有看到过，列表的展开与收起效果在网站设计中还是比较常见的，那么种效果是如何实现的呢？下面我们就来一起学习一下。 笔者的第一反应就是用height+overflow:hidden;实现，既没有性能问题，也不必担心显示问题。但是转眼间就想到：很多时候我们需要展现的内容都是动态的，也就是说内容高度是不固定的（当然，你也可以用overflow-y:auto; 暂且不论）。而要达到这种效果，height就要使用“非固定值auto”！ 但是auto并不是数值，而是一个关键字，所以在一个隐性规定 —— 数值和关键字之间无法计算 下，如果我们使用height在0px和auto之间切换，是无法形成过渡或动画效果的。 同样的还有css中的clip-path属性：很多初学者习惯于在none和具体值之间形成动画效果，这是不可能的。 因此，想要达到文首的效果，笔者推荐max-height属性： <div class="accordion"> <input id="collapse1" type="radio" name="tap-input" hidden /> <input id="collapse2" type="radio" name="tap-input" hidden /> <input id="collapse3" type="radio" name="tap-input" hidden /> <article> <label for="collapse1">列表1</label> <p>内容1<br>内容2<br>内容3<br>内容4</p> overflow: hidden; padding: 0 20px; margin: 0; border: 1px solid #f66; border-top: none; border-bottom-width: 0; max-height: 0; line-height: 30px; transition: all .5s ease; } input:nth-child(1):checked ~ article:nth-of-type(1) p, input:nth-child(2):checked ~ article:nth-of-type(2) p, input:nth-child(3):checked ~ article:nth-of-type(3) p { border-bottom-width: 1px; max-height: 130px; } 在css中，min-height/max-height出现的场景一定是自适应布局或者流体布局中。而对于展开后的max-height值，我们只需要保证设定值比内容高度大即可 —— 因为在max-height > height 时，元素高度就会以height属性的高度计算。 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
