下拉列表动画（JavaScript实现）

时间：2023-03-31 13:31:30 CSS

实现一个带有动画效果的下拉列表，通常的做法是设置外部容器的高度为固定值，设置其overflow为hidden，应用CSStransition同时赋予它属性。点击相应按钮后改变外层容器的高度，如下实现。▼点我展开

第一第二第三li>第四个functiontoggleByHeight(){constcontainerStyle=document.querySelector('#p11-1').style;constbuttonExpand=document.querySelector('#p11-3-btn');如果(containerStyle.height=='0px'){containerStyle.height='120px';buttonExpand.innerText='▲点我折叠';}else{containerStyle.height='0px';buttonExpand.innerText='▼点我展开';}}#p11-1{溢出：隐藏；过渡：高度1s；边距：0px;}#p11-1li{字体大小：16px;颜色：#ffffff；行高：30px；文本对齐：居中；边距：0px；}#p11-1-btn{光标：指针；background-color:#dcdcdc;}　　以上方法只适用于内部元素高度已知的情况。我们知道每里的行高是30px，因为里没有边框、内边距和外边距，所以每里的高度是30px，全部展开后总高度是150px。　　但是在现实中，我们并不能一直知道内部元素的高度，并且不能在display:none和display:auto之间应用过渡效果（不知道为什么），所以这个方法是不适用，那么内部元素的高度应该如何设置？计算一下？有人会说可以给父元素设置最大高度max-height，所以只要max-height的值大于内部元素的总高度就可以了，但是这就要求我们的max-height值provide不能太小也不能太大，太小太大，动画会延迟。　　更好的方法是使用JS计算内部元素的高度。假设如下HTML结构，虽然外部容器的高度为0px，但是每个内部元素的高度仍然是它原来的高度，只是隐藏起来而已，我们可以用JS来计算内部元素的总高度。first

第二个

第三个