使用max-height替代height实现更稳定的动画；2. 通过JavaScript动态设置max-height为scrollheight解决高度不确定问题；3. 添加opacity过渡和cubic-bezier曲线优化动画效果；4. 在点击时遍历其他项并关闭其实现手风琴互斥展开，从而完整实现可交互、平滑且仅一项展开的手风琴效果。
用css动画实现展开折叠手风琴效果，核心在于利用height或max-height属性的动画过渡，配合overflow: hidden隐藏超出部分。通过改变这些属性的值，就能实现平滑的展开和折叠效果，而无需JavaScript介入。
解决方案
首先，我们需要html结构，大致如下：
<div class="accordion"> <div class="accordion-item"> <button class="accordion-header">Section 1</button> <div class="accordion-content"> <p>Content of section 1.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> </div> <div class="accordion-item"> <button class="accordion-header">Section 2</button> <div class="accordion-content"> <p>Content of section 2.</p> </div> </div> </div>
接下来是CSS部分，这是关键：
.accordion-content { height: 0; /* 初始高度为0，隐藏内容 */ overflow: hidden; transition: height 0.3s ease; /* 平滑过渡 */ } .accordion-item.active .accordion-content { height: auto; /* 展开时，高度自适应 */ } .accordion-header { /* 样式 */ } .accordion-item { /* 样式 */ }
这里的height: auto看似简单，但它能让内容根据自身高度展开。为了让动画生效，我们需要一个active类来触发展开。这个类通常通过JavaScript来控制，但如果仅仅追求CSS实现，可以用:target伪类，不过适用性受限。
.accordion-item:target .accordion-content { height: auto; /* 通过锚点链接触发展开 */ }
实际应用中，height: auto可能会导致动画效果不佳，因为浏览器无法预知最终高度。更好的做法是预估一个最大高度，使用max-height：
.accordion-content { max-height: 0; /* 初始最大高度为0，隐藏内容 */ overflow: hidden; transition: max-height 0.3s ease; /* 平滑过渡 */ } .accordion-item.active .accordion-content { max-height: 500px; /* 展开时，最大高度，根据实际情况调整 */ }
这里的500px需要根据你的内容来调整，确保能容纳所有内容。
如何解决手风琴展开时内容高度不确定的问题？
max-height方案虽然可行，但需要预估高度。如果内容高度变化较大，可能会出现动画不完整或者展开后留有空白。更优雅的解决方案是使用JavaScript动态计算高度，然后设置给max-height。
例如：
const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); const content = item.querySelector('.accordion-content'); header.addEventListener('click', () => { item.classList.toggle('active'); if (item.classList.contains('active')) { content.style.maxHeight = content.scrollHeight + 'px'; } else { content.style.maxHeight = 0; } }); });
这段代码在点击header时，会计算content的scrollHeight，然后动态设置max-height，这样就能完美解决高度不确定的问题。
如何优化手风琴的动画效果？
除了height和max-height，还可以尝试其他css属性来增强动画效果。例如，可以添加opacity过渡，让内容在展开时淡入：
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; } .accordion-item.active .accordion-content { max-height: 500px; opacity: 1; }
还可以尝试不同的transition-timing-function，例如cubic-bezier()，来调整动画的速度曲线，让动画更自然。此外，还可以为accordion-header添加一些hover效果，增强交互性。
如何处理多个手风琴同时展开的情况？
默认情况下，点击一个手风琴项，其他项不会自动关闭。如果希望实现“一次只展开一个”的效果，需要在JavaScript中添加一些逻辑：
const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); const content = item.querySelector('.accordion-content'); header.addEventListener('click', () => { // 关闭其他展开的项 accordionItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); otherItem.querySelector('.accordion-content').style.maxHeight = 0; } }); item.classList.toggle('active'); if (item.classList.contains('active')) { content.style.maxHeight = content.scrollHeight + 'px'; } else { content.style.maxHeight = 0; } }); });
这段代码在点击header时，会先遍历所有手风琴项，关闭其他已经展开的项，然后再展开当前项。这样就能保证一次只有一个手风琴项处于展开状态。
