先上效果
🌟手风琴效果作为一种流行的交互式UI元素，以其独特的折叠展开特性，广泛应用于FAQs、侧边栏菜单等场景。本文将分享如何利用CSS动画轻松实现手风琴效果，并且提供了一键复制的代码，让开发者和设计师能够快速集成这一动态效果到自己的项目中，无需编写复杂的脚本。
完整代码
HTML
<div class="accordion"> <div class="accordion-item"> <div class="accordion-header">第一项</div> <div class="accordion-content"> <p>这是第一项的内容。点击标题可以展开或收起此内容。</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">第二项</div> <div class="accordion-content"> <p>这是第二项的内容。每个项目都可以独立展开和收起。</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">第三项</div> <div class="accordion-content"> <p>这是第三项的内容。您可以根据需要添加更多的项目。</p> </div> </div> </div>
CSS代码：
.accordion { width: 300px; margin: 0 auto; } .accordion-item { background-color: #f1f1f1; margin-bottom: 5px; overflow: hidden; transition: max-height 0.3s ease; } .accordion-header { background-color: #3498db; color: white; padding: 15px; cursor: pointer; } .accordion-content { padding: 15px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion-item.active .accordion-content { max-height: 200px; }
JS：
document.querySelectorAll('.accordion-header').forEach(header => { header.addEventListener('click', () => { // 先遍历所有.accordion-header的父元素并移除active类 document.querySelectorAll('.accordion-header').forEach(otherHeader => { otherHeader.parentElement.classList.remove('active'); }); header.parentElement.classList.toggle('active'); }); });
