本文介绍如何使用原生 html、css 和 javascript 实现一个“手风琴式”可伸缩面板，点击标题时展开/收起内容区域，并自动推动下方元素上下移动，避免遮挡或重叠，适用于订阅表单、faq 等场景。
在网页交互设计中，“可伸缩面板”（通常称为 Accordion）是一种常见模式：用户点击标题后，对应的内容区域平滑展开，同时下方所有元素随之自然位移——而非以 position: absolute 或 z-index 叠加在顶部。这种布局既符合语义化结构，又具备良好的可访问性与响应性。
下面是一个轻量、无依赖的实现方案，仅使用原生技术，兼容现代浏览器：
✅ 基础 HTML 结构
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">Subscribe to the latest news from AMD</button>
<div class="accordion-content">
<label for="edit-email">Email</label>
<input type="email" id="edit-email" name="email" class="form-control">
<button type="submit" class="btn">Submit</button>
</div>
</div>
</div>? 提示：使用 <button> 替代 <div> 作为触发器，可提升键盘导航与屏幕阅读器支持（如按 Enter/Space 键触发）。
? 样式控制（CSS）
.accordion {
width: 100%;
max-width: 600px;
margin: 2rem auto;
}
.accordion-header {
background-color: #f1f1f1;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 12px 16px;
width: 100%;
text-align: left;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.accordion-header:hover {
background-color: #eaeaea;
}
.accordion-content {
display: none; /* 初始隐藏 */
padding: 20px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 5px 5px;
animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.btn {
margin-top: 10px;
padding: 8px 16px;
border: 1px solid #0073ba;
background-color: #0073ba;
color: white;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #005a99;
}⚙️ 交互逻辑（JavaScript）
document.addEventListener('DOMContentLoaded', () => {
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(other => {
if (other !== item) {
other.querySelector('.accordion-content').style.display = 'none';
}
});
// 切换当前项
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
});
});? 关键要点说明
- 自然位移原理：所有元素采用默认文档流（display: block），accordion-content 使用 display: none/block 控制显隐，浏览器会自动重排布局，下方元素随之上移或下推；
- 避免重叠：切勿对 .accordion-content 设置 position: absolute 或 fixed，否则将脱离文档流，导致位移失效；
- 增强体验：可进一步添加 CSS max-height 过渡动画（配合 overflow: hidden）实现更顺滑的展开收缩效果；
- 无障碍建议：为 <button> 添加 aria-expanded 和 aria-controls 属性，并动态更新其状态，提升可访问性。
通过以上三段式代码，你即可快速构建一个语义清晰、行为可靠、视觉友好的可伸缩面板——就像 AMD 官网底部的订阅模块一样，简洁、实用、专业。
