本文详解如何使用 html、css 和原生 javascript 创建一个“手风琴式”可折叠面板，点击标题时展开/收起内容区域，且不遮挡也不重叠，而是真实推移后续元素布局。
在网页交互设计中，“可收起面板（Accordion）”是一种常见模式：用户点击标题后，对应的内容区域平滑展开或收起，同时下方所有元素会随内容高度动态上移或下移——即真正“推移布局流”，而非使用 position: absolute 或 z-index 叠加覆盖。这种效果既符合语义化结构，又具备良好的可访问性与响应式兼容性。
以下是一个轻量、无依赖的实现方案（纯原生 JS，无需 jQuery 或框架）：
✅ 基础 HTML 结构
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Subscribe to the latest news from AMD</div>
<div class="accordion-content">
<label for="edit-email">Email</label>
<br>
<input type="email" id="edit-email" name="email" class="form-control">
<br>
<input type="submit" class="btn" value="Submit">
</div>
</div>
</div>? 样式关键点（CSS）
- .accordion-content 初始设为 display: none，确保不占文档流；
- 展开时切换为 display: block，浏览器自动重排布局，自然推移后续元素；
- 避免使用 visibility: hidden 或 opacity: 0（它们仍占据空间）或 position: absolute（脱离文档流）；
- 添加基础视觉样式提升体验：
.accordion {
width: 100%;
max-width: 600px;
margin: 2rem auto;
}
.accordion-header {
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 5px;
padding: 12px 16px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s;
}
.accordion-header:hover {
background-color: #e9e9e9;
}
.accordion-content {
display: none; /* 关键：初始隐藏且不占位 */
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 5px 5px;
}
.btn {
margin-top: 10px;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
}⚙️ 交互逻辑（JavaScript）
使用 display 切换是最直接、最可靠的方式，确保 DOM 重排生效：
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';
}
});
// 切换当前项
content.style.display = content.style.display === 'block' ? 'none' : 'block';
});
});
});? 进阶提示：如需添加平滑过渡动画，可改用 max-height + overflow: hidden 配合 CSS 过渡（需预设合理高度值），或使用 height: auto 的 CSS-in-JS 方案；但对表单类内容，display 切换更稳定、无障碍支持更好。
✅ 注意事项
- 确保 <input> 等表单控件有正确 name 和 id 属性，便于可访问性（如 for 关联 label）；
- 在生产环境建议为 .accordion-header 添加 role="button" 和 aria-expanded / aria-controls 属性，提升屏幕阅读器支持；
- 若页面含多个 accordion 组，应封装为可复用函数，并通过 data-* 属性控制作用域。
该方案简洁、健壮、语义清晰，完美复现 AMD 官网底部订阅模块的行为逻辑：点击即展开，内容真实推移布局，无重叠、无遮挡，开箱即用。
